SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trouble in implementing a simple floating menu/div

    Hi
    I want to implement a simple floating horizontal nav bar, but its just not rendering. am i missing something

    html:
    <body>

    <div id="content">
    hello this is the example of floatable navigation
    <ul class="nav">
    <li> <a href="#">January</a></li>
    <li> <a href="#">February</a></li>
    <li> <a href="#">March</a></li>
    <li> <a href="#">April</a></li>
    <li> <a href="#">May</a></li>
    </ul>


    <div id="hello">

    </div>
    </div>


    <script>

    $(document).ready(function(){

    $(window).scroll(function(){

    $(window).scroll(function() {
    $('#nav').css('top', $(document).scrollTop());
    });

    }); //ready

    </script>

    </body>

    css:

    .nav{
    list-style-type:none;
    background-color:red;
    }

    #content{
    height:2000px;
    width:500px;
    background-color:#AA82E5;
    }



    .nav li{
    float:left;
    background-color:#00CC99;
    color:black;
    margin-left:2px;
    margin-right: 2px;

    }

    it seems so simple,
    #nav.top=document.scrollTop() right!//rough idea
    then what am i missing
    Thanks
    Meera

  2. #2
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi sorry its the nav is a id, even after this small change it does not budge.
    Meera

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    ponce
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what youre after here, is your javascript working ok or its the menu div thats giving you trouble?

  4. #4
    SitePoint Member
    Join Date
    Dec 2004
    Location
    ponce
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use http://jsfiddle.net to quickly debug your code and solve your issue


Tags for this Thread

Bookmarks

Posting Permissions

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