WordPress.org

Forums

[closed] How to make a dropdown menu for WordPress - step by step (5 posts)

  1. StigRoar
    Member
    Posted 8 years ago #

    I know many people have been wondering about how to make a dropdown menu for their WordPress blog. I will now go through this step by step.

    1. Paste this into your CSS file:

    /* Rolling Menu Styles */

    #sidebar {
    display: block;
    border: 0px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    z-index: 5;
    position: relative;
    }

    #sidebar ul {
    width: 90%;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 2px 0px;
    z-index: 500;
    position: absolute;
    bottom: 0;
    left: 20px;
    }

    #sidebar li {
    display: inline;
    float: left;
    position: relative;
    text-align: left;
    padding: 5px 16px 5px;
    margin: 0px 0px 0px 0px;
    }

    #sidebar h2 {
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    weight: bold;
    }

    #sidebar li ul {
    width: 150px;
    height: auto;
    top: 100%;
    left: 0px;
    }

    #sidebar li.LargeMenu ul {
    width: 180px;
    height: auto;
    top: 100%;
    left: 0px;
    }

    #sidebar li ul li {
    text-align: left;
    width: 118px;
    height: auto;
    min-height: auto;
    display: block;
    }

    #sidebar li.LargeMenu ul li {
    text-align: left;
    width: 148px;
    height: auto;
    min-height: auto;
    display: block;
    }

    #sidebar a {
    text-decoration: none;
    }

    #sidebar li li ul {
    top: 0;
    left: 0;
    }

    #sidebar li li:hover ul {
    left: 150px;
    }

    /* initialy hide all sub sidemenus */
    #sidebar ul ul,
    #sidebar ul li:hover ul ul,
    #sidebar ul ul li:hover ul ul,
    #sidebar ul ul ul li:hover ul ul,
    #sidebar ul ul ul ul li:hover ul ul {
    display: none;
    position: absolute;
    }

    /* display them on hover */
    #sidebar li:hover ul,
    #sidebar ul li:hover ul,
    #sidebar ul ul li:hover ul,
    #sidebar ul ul ul li:hover ul,
    #sidebar ul ul ul ul li:hover ul,
    #sidebar ul ul ul ul ul li:hover ul {
    display: block;
    }

    #sidebar #PhpWebcontent {
    display:none;
    }

    /* define the consecutive colors */
    /* define the consecutive colors */

    #sidebar {
    color: #FFFFFF;
    }

    #sidebar ul{
    -moz-opacity:0.88; /* for mozilla */
    opacity: 0.88; /* for safari */
    khtml-opacity: 0.88 /* for konquerer and older safari */
    }

    #sidebar ul ul {
    }
    #sidebar ul li {
    }

    #sidebar h2 {
    color: #FFFFFF;
    }

    #sidebar a {
    color: #FFFFFF;
    }

    #sidebar ul li:hover {
    background: #333333;
    }

    #sidebar ul li ul {

    }

    #sidebar ul li ul li {
    background: #333333;
    }

    #sidebar ul li ul li:hover {
    background: #666666;
    }

    #sidebar ul li ul ul li{
    background: #666666;

    }

    #sidebar ul li ul ul li:hover {
    background: #999999;
    }

    #wp-calendar #next a {
    background: none;
    }

    #wp-calendar #prev a {
    background: none;
    }

    2. Put this code where you want your menu to appear (News blog, all pages and administration panel):

    <table width=100%><tr><td>

    <div id="sidebar">

    <ul id="nav"><li class="page_item">/" title="<?php echo get_option('k2blogornoblog'); ?>"><?php echo get_option('k2blogornoblog'); ?>

    <?php wp_list_pages('sort_column=menu_order'); ?>

    <?php wp_register('<li class="admintab">',''); ?>

    </div>

    </td></tr></table>

    3. Edit wp-includes/template-functions-post.php
    around line 326 comment out or replace
    $output .= ‘<li class="pagenav">’ . $r[’title_li’] . ‘

      ’;
      with
      $output .= '';

      4. Insert this script in your heading:

      <script language="javascript" type="text/javascript" >
      sfHover = function() {
      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
      </script>

      To make this system I combined the Son of suckerfish (http://www.invokemedia.com/css-dropdown-menu-with-wordpress.html) with the jillih theme (http://www.jillij.com/wordpress/)

      I made this work with K2.

      Have fun!

  2. Michael Bishop

    Posted 8 years ago #

    Thanks for sharing, but you might want to use http://wordpress.pastebin.ca

  3. StigRoar
    Member
    Posted 8 years ago #

    well, it doesn't seem to work in IE anyway, so I guess we still havn't got a working dropdown menu then :(

  4. StigRoar
    Member
    Posted 8 years ago #

    anyway, the java script in step 4 isn't relevant

  5. Kafkaesqui

    Posted 8 years ago #

    Continue discussing here:
    http://wordpress.org/support/topic/99723

Topic Closed

This topic has been closed to new replies.

About this Topic