Home/ Questions/Q 8448089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T10:20:06+00:00

So I’ve written this code for a sliding menu, only I’m having one problem,

  • 0

So I’ve written this code for a sliding menu, only I’m having one problem, it’s not sliding. Is there something wrong with my JQuery?

I tried doing a search for this answer since others seem to have had the same issue, but I still can’t find what I have written incorrectly.

<html> <head> <meta charset="utf-8" />  
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $("#tab").toggle(function() { 
            $('#menu').animate({ left: '0' }, 500px);
            $("#tab").html('-');
        }, function() {
            $('#menu').animate({ left: '-600' }, 500px);
            $("#tab").html('+');
        }); });     
    </script>   
    <style type="text/css">             
    #menu{
        position:absolute;
        top:50px;
        left:-100%;
        height:520px;
        width:100%;
        background-color:#000000;
        text-align:center;
        margin:0px;
        font-family:helvetica;
        color:#FFFFFF
        opacity:.9;  
    }       
    a{ 
            padding-right:60px; 
            text-decoration:none;
            margin:40px;
            color:#FFFFFF
    } 
    h1{
        font-size:20px;
        padding:40px;
        color:#FFFFFF
        text-margin:50px;
        } h2{
        font-size:60px;
        padding:70px;
        color:#FFFFFF 
    } 
    h3{
        font-size:15px;
        padding:50px;
        color:#FFFFFF 
    }               
    #tab{
        position:absolute;
        height:90px;
        width:90px;
        right:-80px;
        top:0px;
        background-color:#000000;
        font-family:helvetica;
        color:#FFFFFF;
        font-size:50px;
        cursor:pointer; 
    }           
    </style>    
</head> 
<body>  
    <div id="menu"><h1>     
        <a class="navItem" href="url">title</a>                 
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a></h1>            
        <h2>name</h2>               
        <h3>website title</h3>              
        <div id="tab"> +        
        </div>  
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The second property in the animate function is time in milliseconds without any units attached.

    change it to

    $('#menu').animate({ left: '0' }, 500);

    Edited after comment:
    To make it retract you need to fix the retraction code too

    $('#menu').animate({ left: '-600' }, 500);

    As for the overlap problem, set z-index: 1; on #menu and position: relative; and z-index: 0; on whatever you want it to overlap. As long as those elements are on the same level in terms of HTML nesting. Look up some tutorials on z-index if you’re having trouble with it.

    • 0