Posted by: senex 13 years, 10 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.

• ← alphaomegacontractors.com re-design complete!
• CppHeaderParser 1.9 released →