How To Display Foundation 6 ul dropdown menu an inline-block or inline-table

Discussion in 'HTML & Website Design' started by amonania, Mar 21, 2016.

  1. #1
    I am using zurb foundation to create a website, and I am using dropdown menu. My problem is how to display the drop down as inline block. Using foundation's rules, it's difficult to do this. I hope some has an idea about this. The code is below:

     <div class="row column text-center">
        <ul class="dropdown menu custom-menu" data-dropdown-menu>
        <li>
          <a href="#">For Sale()</a>
          <ul class="menu" id="display-style">
            <li><a href="#">Animals()</a></li>
            <li><a href="#">Computer-Software()</a></li>
            <li><a href="#">Computer-Hardware()</a></li>
            <li><a href="#">Cellphone-accessories()</a></li>
            <li><a href="#">For Babies-Infants()</a></li>
            <li><a href="#">Used Cars()</a></li>
          </ul>
        </li>
          <li><a href="#">Vehicles</a>
            <ul class="menu">
             <li><a href="">Used Cars</a></li>
            </ul>
          </li>
          <li><a href="#">Classes</a></li>
          <li><a href="#">Real Estate</a></li>
          <li><a href="#">Sevices</a></li>
          <li><a href="#">Community</a></li>
          <li class="has-dropdown">
          <a href="#">Personals</a>
           <ul class="dropdown">
            <li><a href="">One</a></li>
            <li><a href="">One</a></li>
           </ul>
           </li>
          <li><a href="#">Jobs</a></li>
      </ul>
     
    </div> 
    Code (markup):
     
    amonania, Mar 21, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Oh, wow... never used Foundation, and now I see why. _WHY_ are you using this crap? It adds bloat, it adds _javascript_ for simple things like a drop-down menu, and it mucks up changing things in CSS that should be simple to do. My tip: get rid of foundation, and do it in plain HTML/CSS - the whole site, not just the menu.
     
    PoPSiCLe, Mar 22, 2016 IP
  3. amonania

    amonania Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Hmm,
    This has been a pain in my ass. This could be done easily using html/css, but using foundation, I can't. I have asked this on their forum but I haven't received any reply yet.
     
    amonania, Mar 22, 2016 IP
  4. amonania

    amonania Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    what do you think about bootstrap?
     
    amonania, Mar 22, 2016 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Same as @PoPSiCLe answered above. This job is not that difficult.
    Here's example of how it works: http://codepen.io/philhoyt/pen/ujHzd

    Try it yourself. If there any problems, then ask again.
     
    ketting00, Mar 22, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Why are you using these frameworks? (or consider using these frameworks). They don't add anything useful, just bloat, excessive class names, sometimes even badly formed html.
    I see no benefit from using either, the html for these things are quite simple, and the css shouldn't be too complicated either. So why bother using something that doesn't even provide the options you need?
     
    PoPSiCLe, Mar 23, 2016 IP