Results 1 to 4 of 4

Thread: sub menu list

  1. #1
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default sub menu list

    how can i add multi level menu to my menu which i wrote below ? i want to do like this(http://www.dynamicdrive.com/style/cs...el_css_menu_2/)

    Code:
    ul.menu {
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:33px;
    
    background:url(images/bg.png) repeat-x top left;
    font-family: "Lucida Grande",Verdana,sans-serif;
      font-size: 12px;
      line-height: 16px;
    border:1px solid #000;
    margin:0;
    padding:0;
    }
    
    ul.menu li {
    display:block;
    float:left;
    margin:0;
    padding:0;
    }
    
    ul.menu li a {
    float:left;
    color:#A79787;
    text-decoration:none;
    height:24px;
    padding-left:15px;
    padding-top:4px;
    font-weight:normal;
    }
    
    ul.menu li a:hover,.current {
    color:#fff;
    background:url(images/bg.png) repeat-x top left;
    text-decoration:none;
    }
    
    ul.menu .current a {
    color:#fff;
    font-weight:700;
    }
    
    
    /*GREEN*/
    ul.menu.green{
    }
    ul.menu.green li a:hover, .menu.green li.current {
    background-color:#7AB900;
    }
    Code:
    <ul class="menu green">
    		<li><a href="test.php" target="_self">test</a></li>
                    <li><a href="test" target="_self">test</a>
                   <ul>
                   <li><a href="test" target="_self">test</a></li> 
                   <li><a href="test.php" target="_self">test</a>
                  </ul>
                  </li>
    		<li><a href="test.php" target="_self">test</a></li>
             </ul>

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Wrap it with the div from the demo page:
    Code:
    <div id="myslidemenu" class="jqueryslidemenu">
    Your menu here
    <br style="clear: left">
    </div>
    Add this to the head section of your page:
    Code:
    <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="jqueryslidemenu.js"></script>
    Finally, download the JavaScript and CSS files and the arrow images from the demo page.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Snookerman View Post
    Wrap it with the div from the demo page:
    Code:
    <div id="myslidemenu" class="jqueryslidemenu">
    Your menu here
    <br style="clear: left">
    </div>
    Add this to the head section of your page:
    Code:
    <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="jqueryslidemenu.js"></script>
    Finally, download the JavaScript and CSS files and the arrow images from the demo page.

    Good luck!

    When you said, " Add this to the head section of your page:". Is this going to every page of .html or just the index.html?

    Sorry, I am a newbie and learning now.

    Hannah

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You will need it on every page that you want the menu to be on. If you want the menu on all your pages, which I assume you do, then you need to add that to all of them.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •