Creating a horizontal dropdown

HTML & CSS
1

I developed a site in Laravel and I have categories being called from the database and they are going past the bottom of the screen which is making users scroll down to see them all.

If you look at the image, you will see the result I am after.

I have looked at examples and I can get the effect if I manually add the links, but they are being called from the db

673×585 146 KB

HTML

<div class="menu">
      <a class="toggleMenu" href="#"><img src="images/nav_icon.png" alt="" /></a>
        <ul class="nav" id="nav">
        <li><a href="/pages/about" class="scroll">About Us</a></li>
        @foreach($sections as $section)
        <li class="section">
            <a href="#" class="cat-toggle dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $section->name }}</a>
            <ul class="categories dropdown-menu">
                @foreach($section->categories as $category)
                    <li><a href="{{ url('/category/'.$category->id.'/show') }}">{{ $category->name }}</a></li>
                @endforeach
            </ul>
        </li>
        @endforeach
            <li><a href="/pages/engineering-services" class="scroll">Engineering Services</a></li>
           <li><a href="#contact" class="scroll">Contact Us</a></li>
           <div class="clear"></div>
        </ul>
    </div>

CSS

.menu{
    float:right;
    padding-top: 1%;
}
.menu li{
    display:inline-block;
}
.menu li:first-child{
    margin-left:0;
}
.menu li a {
    display: block;
    font-size: 18px;
    padding: 10px 10px;
    color: #FFF;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: 300;
}
.menu li a:hover ,.menu li.active a{
    background:#000000;
    color:#4BCAFF;
}
#nav .current a {
    color:red;
}
.toggleMenu {
    display:  none;
    padding: 2px 0px 0px 0px;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
2

It should not make any difference where the code comes from, if the resulting html is the same. :confused:
Is this a question about retrieving data and rendering to html or one of styling the html with css?

3

I guess it would be Styling.

I want my dropdowns to look like example #2, but I cannot seem to get them horizontal. I tried mega menu but it would just call the first item and not the rest.

4

I have updated the code but the menu is still just one long one instead of in columns. Can anyone shed some light on this?

HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
        	<li><a href="/">Home</a></li>
        	<li><a href="/pages/about">About Valiant</a></li>
        	@foreach($sections as $section)
        	<li class="dropdown">
        	    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ $section->name }}<b class="caret"></b></a>
        	    <ul class="dropdown-menu multi-column columns-3">
        	        <div class="row">
        	            <ul class="multi-column-dropdown">
        	            <div class="col-sm-4">
        			          @foreach($section->categories as $category)
        						<li><a href="{{ url('/category/'.$category->id.'/show') }}">{{ $category->name }}</a></li>
        	                  @endforeach
                           </div>
                        </ul>

        	        </div>
        	    </ul>
        	</li>
        	@endforeach
        	<li><a href="#">Engineering Services</a></li>
        	<li><a href="#">Contact</a></li>
          </ul>
        </div>

CSS

.dropdown-menu {
    min-width: 200px;
}
}
.dropdown-menu.columns-3 {
    min-width: 600px;
    background-color: #484848;
}
.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}
.multi-column-dropdown {
    list-style: none;
}
.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #333;
    white-space: normal;
}
.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
}
5

The CSS starts off looking a little shady…

.dropdown-menu {
    min-width: 200px;
}
}

Two closing curly braces?

 

The HTML that you are showing isn’t valid HTML. I do not know what

@foreach($sections as $section)

is but it’s not HTML.

Perhaps Laravel php framework? If so, it should not appear “raw” within HTML. We need to see the “compiled” HTML after the php has been interpreted and turned into HTML for the browser to render.

Likewise, megamenu is not a Laravel component, so it needs to be coded outside of Laravel…( in case that’s what’s happening with megamenu.) Just guessing.

6

You can’t nest a div as a direct child of a ul:

 <ul class="dropdown-menu multi-column columns-3">
        	        <div class="row">

The div is invalid and won’t work properly there it should be a list element.

 <ul class="dropdown-menu multi-column columns-3">
        	        <li class="row">

You repeat the mistake elsewhere.

It also seems you are using bootstrap but not following the rules for the grid either which doesn’t help things along.

As Ron said we really need to see your live version or at least a fully rendered html and css working version before we can fix this. I can tell you that the code above is of no use to you and too broken to fix easily.

Or indeed you may be better off building the menu as a stand alone and get it working first before you add your scripts to it.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.