Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa JavaScriptQuestions having problem with menu ans sub menu items css ...plz help!!

Have Programming Question? Ask it here!
 
 
 


majid
having problem with menu ans sub menu items css ...plz help!!
0 Answer(s)      3 years and 2 months ago
Posted in : JavaScript Questions


PLZ help ...this is my html menu

> <div id="content">   <div
> class="navigation" id="nav">
>     <div class="item user">
>             <img src="images/bg_user.png" alt=""
> width="199" height="199"
> class="circle"/>
>             <a href="#" class="icon"></a>
>             <h2>Sign In</h2>
>             <ul>
>             <li><a href="#">Like Us</a></li>
>             <li><a href="#">Share</a>
>             <ul id="menu">
>             <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

and this is my css for my menu:

}
.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{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    position:absolute;
    left: 110px;
    top: 0;
    display: none;
    }

the thing is that im using a javascript to fade in main menu items but the sub menu items also fade in with the main menu making it awkard...i want the sub menu items to appear when mouse hovered over the main menu items. and yes here is the javascript:

    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <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>

ANY help wud be Much Appreciated. Thanks in advance......Smile | :)


Advertisement
View Answers

Related Tutorials/Questions & Answers:
 

 

 

DMCA.com