Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS menu
this is my css.
 
.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#424242;
    color:#fff;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}
.item li:hover ul, li.over ul{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
    position: absolute;
    left: 110px;
    top: 0;
    display: block;
    }
 
and this is my html where it gets appplied...the main menu
<div id="content">
          <div class="navigation" id="nav">
            <div class="item user">
                    &lt;img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/&gt;
                    <a href="#" class="icon"></a>
                    <h2>Sign In</h2>
                    <ul>
                        <li><a href="#">Like Us</a></li>
                        <li><a href="#">Share</a>
                    <ul id="static" class="static">
                    <li><a href="#">mother</a></li>
                    <li><a href="#">father</a></li>
                    <li><a href="#">brother</a></li>
                    <li><a href="#">sister</a></li>
                    <li><a href="#">couzin</a></li>
                    <li><a href="#">uncle</a></li>
                    </ul>
 
                        </li>
                        <li><a href="#">Tell</a></li>
                    </ul>
              </div>
</div></div>
and with this im using the jquery fade in effect::
        <script type="text/javascript">
            $(function() {
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'top'       :'-25px',
                        'left'      :'-25px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                    });
 
                    $this.find('a:first,h2').addClass('active');
                },		
				
				
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');
 
                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>
every thing works fine but ... when i hover over the main menu item the sub menu items also get faded in and displayed>>>in an awkward manner and when i hover over the sub menu item it dissapears and gets to its original sub sub menu place,,,,how do i solve this>>>i dont want the sub menu to appear in main menu items..i knw im addind or missing smething.plz help for demo click here
Posted 13-Jun-11 13:37pm
maajidz157
Edited 14-Jun-11 1:21am
(no name)498.9K
v2
Comments
thatraja at 14-Jun-11 1:10am
   
Don't use ALL CAPS in internet(it's called as shouting).
maajidz at 14-Jun-11 2:07am
   
thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 325
1 DamithSL 265
2 CPallini 235
3 Sergey Alexandrovich Kryukov 229
4 Maciej Los 190
0 OriginalGriff 5,455
1 DamithSL 4,422
2 Maciej Los 3,860
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,010


Advertise | Privacy | Mobile
Web01 | 2.8.141216.1 | Last Updated 14 Jun 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100