How to add dropdown menus to mezzanine

Posted by: senex 7 years, 7 months ago

(Comments)

This is a quick tutorial on how to get mezzanine to give you dropdown menus.

First, at the top of base.html where you link style sheets add the following line:

<link rel="stylesheet" href="{{ MEDIA_URL }}css/dropdown_menu.css" type="text/css" />

Second you need to change base.html.  Find somewhere at the top where you want your menu that is not within a grid960 container element. and add the following snippet:

<!-- start menu -->
<div class="container_12 clearfix" id="top-nav-section">
  <div id="grid-top">
    <div id="menu">
      {% page_menu "pages/menus/tree.html" %}
    </div>
  </div>
</div>
<!-- end menu -->

finally, create the file at {{MEDIA_URL}}css/dropdown_menu.css and insert the following content:

/* Take from http://www.cssmenumaker.com/builder/menu_info.php?menu=057 */
#menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
}
#menu ul{
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
#menu li{
    float:left;
    padding:0px;
}
#menu li a{
    background:#000000;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}
#menu li ul{
    background:#000000;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
}
#menu li:hover ul{
    display:block;
}
#menu li li {
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}
#menu li:hover li a{
    background:none;
}
#menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
#menu li ul a:hover, #menu li ul li:hover a{
    border:0px;
    text-decoration:none;
    color: #bbbbbb;
}
#menu p{
    clear:left;
}

Now if you hover over menu items with subpages you should see those secondary pages.  You may have to change the background color from black to whatever fits best with your site.

Currently unrated


Comments

Search

Recent Posts

Archive

2016
2014
2013
2012
2011
2006

Categories

Authors

Feeds

RSS / Atom

Menu