www.webdeveloper.com
Results 1 to 13 of 13

Thread: Creating a menu - Please review my code

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    31

    Creating a menu - Please review my code

    Hey friends

    I'm creating a menu simiilar to Windows start menu that once clicked, other submenus pop up.
    However, it doesn't seem to work.
    Could you please show me what I'm doing wrong?

    Here is my code:

    HTML:

    HTML Code:
    <html>
    <head>
    
     <link rel="stylesheet" type="text/css" href="menu.css">
     
     </head>
    <body>
    
    <script>
    $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
    $('body').click(function() { $('.menu').next().hide(); });
    </script>
    
    <div id="menu">
    <ul>
    <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    
    
    </body>
    </html>
    CSS:

    Code:
    body{background-color:grey;}
    
    #menu li{width:200px; float:left;list-style-type:none;
    position:relative; top:530px; left:-47px;}
    #menu a{ border-radius:15px; display:block; color:white;
    text-indent:55px; border:1px solid white; background-color:black;
    font-size:18pt; font-weight:bold; text-decoration:none;}
    #menu a:hover{color:black; background: white;}
    
    #menu ul .submenu li{height:75px; float:left; width:250px;}
    #menu li .submenu{position:absolute; left:20px; top:-907px;
    width:10px; height:200px; display:none;}
    
    
    #menu li:active .submenu{display:block; float:left;  height:200px;}

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    Either you have omitted some code
    or you are using JQuery and have left out the loading of the library source for anything to happen.

  3. #3
    Join Date
    Apr 2013
    Posts
    1

    Cool

    If you want to create a Drop Down Menu for your site You may take help from following Program:

    First off, the CSS


    Place the following CSS in between your < head > < / head > tags.


    <style>
    /*---- CROSS BROWSER DROPDOWN MENU ----*/
    ul#nav {margin: 0 0 0 200px;}
    ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
    ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible }
    </style>

    and secondly, the HTML

    Place the following HTML in between your < body > < / body > tags.


    <ul id="nav" class="drop">
    <li><a href="#">Home</a></li>
    <li>About Us
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Staff</a>
    <ul>
    <li><a href="#">George Orsmond</a>
    <ul>
    <li>Web Design</li>
    <li>Graphic Design</li>
    <li>HTML</li>
    <li>CSS</li>
    </ul>
    </li>
    <li><a href="#">Dave Macleod</a></li>
    </ul>
    </li>
    <li><a href="#">FAQs</a></li>
    </ul>
    </li>
    <li>Services
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Logo Design</a></li>
    </ul>
    </li>
    <li>Products
    <ul>
    <li class="dir"><a href="#">Templates</a></li>
    <li class="dir"><a href="#">Stock Images</a>
    <ul>
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a></li>
    <li><a href="#">Category 4</a></li>
    <li><a href="#">Category 5</a></li>
    </ul>
    </li>
    <li><a href="#">Featured</a></li>
    <li><a href="#">Top Rated</a></li>
    <li><a href="#">Resources</a></li>
    </ul>
    </li>
    <li><a href="#">Gallery</a></li>
    <li>Contact Us
    <ul>
    <li><a href="#">Contact Form</a></li>
    <li><a href="#">How to get here</a></li>
    <li><a href="#">View the map</a></li>
    </ul>
    </li>
    </ul>Live Project Training

  4. #4
    Join Date
    Apr 2013
    Posts
    11
    Very good job on majority of the code in css, you just one small step away from have it working.
    Look at line 15 in your menu.css
    Change #menu li:active to #menu li:hover should resolve the awkward start menu doesn't stay open after click.

    active event only trigger when user click on start button, but once user let go the mouse button, the menu will hidden again.

    If you really want to click the start button to pop up the menu, then you might want to think about adding javascript.

  5. #5
    Join Date
    Mar 2011
    Posts
    31
    Hey everyone.

    Thanks for your replies, I just wanted to clarify something.
    I want my menu to work similarly to the Windows 7 Start menu.
    Basically, Once the user clicks on the main menu, a list would pop out.
    I'm new to JavaScript, so I'm not sure what I'm exactly doing.
    I tried the code below, but it's not working.

    Code:
    <script>
    $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
    $('body').click(function() { $('.menu').next().hide(); });
    </script>

  6. #6
    Join Date
    Apr 2013
    Posts
    11
    Eck, how did you guys create code textbox? apparently it wasn't quote.

  7. #7
    Join Date
    Apr 2013
    Posts
    11
    Here is what I got, first I notice you are using jquery syntax, but you forgot to include jquery.js
    Another part, <script> place before html content which means event handlers weren't attach to element before html finish loading.

    Solution:
    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="menu.css">
    <script src="jquery-1.9.1.min.js"> </script>
    </head>
    <body>



    <div id="menu">
    <ul>
    <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    <script>
    /*
    $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
    $('body').click(function() { $('.menu').next().hide(); });
    */

    $("#menu").bind('click',function(){
    $("#menu li .submenu").toggle();
    });

    </script>

    </body>
    </html>

  8. #8
    Join Date
    Mar 2011
    Posts
    31
    Quote Originally Posted by dennist82 View Post
    Here is what I got, first I notice you are using jquery syntax, but you forgot to include jquery.js
    Another part, <script> place before html content which means event handlers weren't attach to element before html finish loading.

    Solution:
    Hey dennist82

    It's not working, I'm not sure why.
    On my CSS I changed #menu li:active to #menu li:hover.
    What am I doing wrong?

    Here is the updated code:

    HTML

    HTML Code:
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="menu.css">
    <script src="jquery-1.9.1.min.js"> </script>
    </head>
    
    <body>
    <div id="menu">
    <ul>
    <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    <script>
    /*
    $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
    $('body').click(function() { $('.menu').next().hide(); });
    */
    
    $("#menu").bind('click',function(){
    $("#menu li .submenu").toggle();
    });
    
    </script>
    
    </body>
    </html>
    CSS

    Code:
    body{background-color:grey;}
    
    #menu li{width:200px; float:left;list-style-type:none;
    position:relative; top:530px; left:-47px;}
    #menu a{ border-radius:15px; display:block; color:white;
    text-indent:55px; border:1px solid white; background-color:black;
    font-size:18pt; font-weight:bold; text-decoration:none;}
    #menu a:hover{color:black; background: white;}
    
    /*submenu design*/
    #menu ul .submenu li{height:75px; float:left; width:250px;}
    #menu li .submenu{position:absolute; left:20px; top:-907px;
    width:10px; height:200px; display:none;}
    
    /*Press/hover to fire-up menu*/
    #menu li:hover .submenu{display:block; float:left;  height:200px;
    }

  9. #9
    Join Date
    Apr 2013
    Posts
    11
    O, I forgot to tell you about line 5, you have to change it to:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    You need to have jquery library before my javascripts to work.

  10. #10
    Join Date
    Mar 2011
    Posts
    31
    Quote Originally Posted by dennist82 View Post
    O, I forgot to tell you about line 5, you have to change it to:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    You need to have jquery library before my javascripts to work.

    Hey dennist82
    It's still not working for some reason.
    Should I get rid of the Hover state on line 17?
    Code:
    /
    #menu li:hover .submenu{display:block; float:left;  height:200px;}
    Whenever I hover over the start button the menu pops out, but nothing happens when I click on it.
    Is it working in your end?

  11. #11
    Join Date
    Apr 2013
    Posts
    11
    Here are my code that works on my end.
    It most likely, you are testing the html page locally. It easy to identify rather it load from http or local file. Look at the URL, if it starts with file:///C:, then it is only access your local directory which means you have to download jquery library from jquery.com, then place it in same directory as html page.

    menu.css
    Code:
    body{background-color:grey;}
    
    #menu li{width:200px; float:left;list-style-type:none;
    position:relative; top:530px; left:-47px;}
    #menu a{ border-radius:15px; display:block; color:white;
    text-indent:55px; border:1px solid white; background-color:black;
    font-size:18pt; font-weight:bold; text-decoration:none;}
    #menu a:hover{color:black; background: white;}
    
    #menu ul .submenu li{height:75px; float:left; width:250px;}
    #menu li .submenu{position:absolute; left:20px; top:-907px;
    width:10px; height:200px; display:none;}
    
    
    /*#menu li:hover .submenu{display:block; float:left;  height:200px;}*/
    html
    Code:
    <html>
    <head>
    
     <link rel="stylesheet" type="text/css" href="menu.css">
     <script src="jquery-1.9.1.min.js"> </script><!-- if you testing html locally, then you need to download jquery library.  Place the file on the same directory as html file  -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- this only works when your webpage is access through http -->
     </head>
    <body>
    
    
    
    <div id="menu">
    <ul>
    <li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    <script>
    /*
    $('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
    $('body').click(function() { $('.menu').next().hide(); });
    */
    
    $("#menu").bind('click',function(){
    	$("#menu li .submenu").toggle();
    });
    
    </script>
    
    </body>
    </html>

  12. #12
    Join Date
    Mar 2011
    Posts
    31
    dennist82, many thanks!!!
    It's working very well.
    Is there a thank you button in this forum?

    One last thing; I noticed that the submenu stays open unless I click the start button again. Is it possible to close the submenu when I click on an empty space or anywhere on my page except the start button?

    I really need to learn JavaScript.

  13. #13
    Join Date
    Mar 2011
    Posts
    31
    Quote Originally Posted by Nick-S View Post
    dennist82, many thanks!!!
    It's working very well.
    Is there a thank you button in this forum?

    One last thing; I noticed that the submenu stays open unless I click the start button again. Is it possible to close the submenu when I click on an empty space or anywhere on my page except the start button?

    I really need to learn JavaScript.
    Oops I wasn't able to edit my post to clarify something, so here it goes.

    I want the submenu to disappear or return to it's original state once I hover outside the submenu area, is that possible?

    Once again, many thanks!
    Last edited by Nick-S; 04-12-2013 at 10:57 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles