CODEWITHSUNDEEP
jquerymenu
user3669317
user3669317

Reputation: 1

Horizontal menu with jQuery

I began to learn HTML, CSS and Javascript 2 weeks ago and I'm stuck at this.

What i want is simply show the submenu when the menu is clicked.

I've read a lot about these. I've even found some similar questions but i just can't use the scripts.

It just don't work.

Here's the HTML.

<body>

  <ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Services</a>
        <ul class="submenu">
           <li><a href="#">Serv 1</a></li>
           <li><a href="#">Serv 2</a></li>
           <li><a href="#">Serv 2</a></li>
        </ul>

     </li>
     <li><a href="#">Products</a>
        <ul class="submenu">
           <li><a href="#">Prod 1</a></li>
           <li><a href="#">Prod 2</a></li>
           <li><a href="#">Prod 2</a></li>
        </ul>

     </li>
     <li><a href="#">Customer</a></li>
     <li><a href="#">Contact</a></li>
  </ul>

Here is the Fiddle for it : http://jsfiddle.net/skV4h/, with the CSS and jQuery.

I'd be glad if anyone could help me.

Thanks in advance.

Upvotes: 0

Views: 122

Answers (3)

Freddy Jose Chirinos Mor&#242;n
Freddy Jose Chirinos Mor&#242;n

Reputation: 346

this code works form me

**HTML**

    <div class="navigation">
        <ul class="nav">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Services</a>
                <ul>
                    <li><a href="#">Consulting</a></li>
                    <li><a href="#">Sales</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </li>
            <li>
                <a href="#">About Us</a>
                <ul>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Contact Information</a></li>
                </ul>
            </li>
        </ul>
    </div>


**CSS**
h1 {
  font-family: Helvetica;
  font-weight: 100;
}
body {
  color:#333;
  text-align:center;
  font-family: arial;
}

.nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.nav li {
    float: left;
    width: 160px;
    position: relative;
}

.nav li a {
    background: #333;
    color: #fff;
    display: block;
    padding: 7px 8px;
    text-decoration: none;
    border-top: 1px solid #069;
}

.nav li a:hover {
    color: #069;
}

/*=== submenu ===*/

.nav ul {
    display: none;
    position: absolute;
    margin-left: 0px;
    list-style: none;
    padding: 0px;
}

.nav ul li {
    width: 160px;
    float: left;
}

.nav ul a {
    display: block;
    height: 15px;
    padding: 7px 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #222;
}

.nav ul li a:hover {
    color: #069;
}


**SCRIPT**


/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
$(document).ready(
  /* This is the function that will get executed after the DOM is fully loaded */
  function () {
    /* Next part of code handles hovering effect and submenu appearing */
    $('.nav li').hover(
      function () { //appearing on hover
        $('ul', this).fadeIn();
      },
      function () { //disappearing on hover
        $('ul', this).fadeOut();
      }
    );
  }
);

Upvotes: 1

Alex Char
Alex Char

Reputation: 33228

Ok i change it a bit cause it didn't work anyway.

html

 <title>Example</title>

      <ul id="menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">Services</a>
            <ul class="submenu">
               <li><a href="#">Serv 1</a></li>
               <li><a href="#">Serv 2</a></li>
               <li><a href="#">Serv 2</a></li>
            </ul>

         </li>
         <li><a href="#">Products</a>
            <ul class="submenu">
               <li><a href="#">Prod 1</a></li>
               <li><a href="#">Prod 2</a></li>
               <li><a href="#">Prod 2</a></li>
            </ul>

         </li>
         <li><a href="#">Customer</a></li>
         <li><a href="#">Contact</a></li>
      </ul>

css

*{
   margin:0;
   padding:0;
}

ul{
   list-style:none;
}

ul#menu{
   width:500px;
   margin:0 auto;
   position:relative;
}
ul#menu li{
   float:left;

}
ul#menu li a{
   display:block;
   float:left;
   padding:0 15px;
   height:25px;
   line-height:25px;
   text-decoration:none;
   color:#333;
   border:1px solid #ccc;
}

ul#menu li a:hover, ul#menu li a.ativo{
   background:#ccc;
}

ul#menu li ul{
   display:none;
   position:absolute;
   top:25px;
   left:0;
   width:460px;
   background:#ccc;
}

js

$( 'li').click(function () {  
    $(".submenu").hide();

    if ( $( '.submenu' ).is( ':hidden' ) ) {
            $(this).find(".submenu").slideDown( 'slow' );
        } 
});

fiddle

Upvotes: 0

DarkAjax
DarkAjax

Reputation: 16223

You have several issues, your JavaScript code doesn't end properly, it should be }) instead of just }, also you're not including jQuery on your fiddle, finally your .submenu elements will overlap if you click one li with .submenu after the other, and the way it is right now it'll only affect your first .submenut. Also, it's better if you bind the .click() function to #menu specifically, otherwise your code will be triggered when you click other li elements as well. You can change your code to this:

$( '#menu').click(function () {  
    $submenu = $( this ).children( '.submenu' );
    if ( $submenu.is( ':hidden' ) ) {
            $submenu.slideDown( 'slow' );
            $('.submenu').not($submenu).hide();
        } else {
            $submenu.hide();
        }
});

Working JSFiddle

Upvotes: 1

Related Questions