Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #4776

    Hi,

    I’m trying to make the menu look and function exactly like this: http://themes.themolitor.com/wpwave/

    only I’ll style it a bit differently.

    I would have a single top navigation item called menu for which I would use a background image (not text). This item would be located top right of pages with a bit of right padding same as in link example. I supposed this could be achieved by using a text anchor called menu with background image and add a text indent to remove the actual linking text outside of page so only image remained but would serve as a hover link to activate the drop down panel.

    On hover, a full width panel would open displaying the entire menu :about us, services, portfolio, blog, contact. At this time, I do not have sub-menu items except for this second level which is my main menu so it would only be those. But if there was, I would like them to display below the parent in the panel (no extra dropping down, just full menu in one single drop-down panel)

    The important thing I am trying to achieve is that when the panel slides down, it would push the entire page down same as seen in demo link above. Note: The third level menu items already seem to do this in the menu set up in velvet theme. I would just like to apply this function on second level instead of third, have the panel be full width and add a color background to full width panel drop down.

    Can someone help pls?

    I’m pretty sure it’s not that difficult but I’m not a css pro and what I’ve tried doesn’t work. I was able to create a top level called menu with full menu drop down below but it wasn’t full width and displayed badly, plus the 3rd level continued to dropdown again on hover of second level items probably because I didn’t remove the li li ul .showblock part of css. Also, this top menu item displayed on the left of my page instead of right.

    Here’s the current menu css:

    [/*menu*/

    .main_menu .menu{

    float: left;

    position: relative;

    top:-28px;

    left: 75px;

    }

    .main_menu .menu > li{

    float:left;

    padding-left:20px;

    width:125px;

    line-height: 1.6em;

    }

    .main_menu .menu li ul{

    display:none;

    overflow: hidden;

    }

    .main_menu .menu li{

    display:block;

    width:125px;

    overflow: hidden;

    }

    .main_menu .menu li ul.showblock{

    display:block;

    }

    .main_menu .menu li:hover > ul{

    display:block;

    }

    .main_menu .menu > li:first-child{

    padding-left:0;

    }

    .main_menu .menu a{

    text-decoration: none;

    text-transform: uppercase;

    display: block;

    }

    .main_menu .menu a:hover{

    text-decoration: none;

    }

    .main_menu .menu > li > a{

    font-weight: bold;

    font-size:12px;

    letter-spacing: 1.5px;

    padding-bottom:5px;

    }

    .main_menu .menu li li a{

    font-size:11px;

    text-transform: none;

    }

    .main_menu .menu li li ul{

    display:none;

    overflow: hidden;

    }

    .main_menu .menu li li{

    display:block;

    width:125px;

    overflow: hidden;

    }

    .main_menu .menu li li li{

    width:115px;

    padding-left:10px;

    }

    .main_menu .menu li li li li{

    width:105px;

    }

    .main_menu .menu li li li li li{

    width:95px;

    }

    .main_menu .menu li li ul.showblock{

    display:block;

    }

    .main_menu .menu li li:hover > ul{

    display:block;

    }]

    I guess the li ul .showblock and li: hover create the dropping down effect and need to be applied to first li level instead of third but I can’t get the panel to be full width.

    Thanks for helping me figure this out and thus allowing me to learn more about css too :D

    #47482

    Hey,

    basically you can style the menu like described above – however it takes some css, js/jquery and maybe html/php coding which and this prject can be a time intensive task. It’s without the scope of this support forum – I’m sorry.

    #47483

    Hi Dude,

    Hmm…since the css menu settings already created the same style drop down for 3rd level menu items, I figured it was just a matter of changing it to apply it to 1st level and adding a code line or changing a few to make it full page width.

    Also I see the template has a mega menu thing in it…it’s in avia framework I think, I’d have to check again but I saw something called mega menu in the files somewhere but I am not familiar with the coding used in this template to play with it.

    thought someone here more familiar with this framework could help.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Full drop down mega menu’ is closed to new replies.