Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Menu Styling Problem

    Ok this is basically my first ever menu navigation and im having a few problems with it, that is problem when it drops down

    http://test.masterrenny.com/ <<< thats it in action

    Code:
    nav { font-family:'BebasNeueRegular'; display:block; border:1px solid #222; position:relative; margin-top: 0; margin-right: auto; margin-bottom: 20px; margin-left: auto; text-transform:uppercase; font-size:18px }
    nav ul { padding:0; margin:0; }
    nav li { position:relative; float:left; list-style-type:none; height:50px; }
    nav li:hover { background:#111; color: white; text-shadow: 0 1px black; }
    nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
    nav li a { color: #999; display: block; line-height: 11px; height: 10px; padding: 20px; border-right: 1px solid #333; box-shadow: -1px 0 #000 inset; -moz-box-shadow: -1px 0 #000 inset; -webkit-box-shadow: -1px 0 #000 inset; text-shadow: 0 -1px black; }
    nav li a:focus { outline:none; text-decoration:underline; }
    nav li:first-child a { border-left:none; }
    nav li.last a { border-right:none; }
    nav a span { display:block; float:right; margin-left:5px; }
    nav ul ul { display:none; min-width:168px; padding:20px; position:absolute; left:0; background:#565656; }
    nav ul ul li { float:none; }
    nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
    nav ul ul a:hover { background-color:#555; }

    The CSS code im using

    Code:
    <nav>
        <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Test</a>
    <ul>
                  <li><a href="#">Test link</a>
    <ul>
                      <li><a href="#">Example</a></li>
                      <li><a href="#">Hehe</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Link</a></li>
                </ul>
              </li>
              <li><a href="#">Last link ok </a></li>
        </ul>
    </nav>
    		                <script>
    $(document).ready(function () { 
         
        $('nav li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(100);
     
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(100);         
            }
        );
         
    });
    </script>


    the link "test" is the drop down part, its surpose to have a arch of two but as u can see, its messed up and its really frustrating me

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    This is a jQuery problem really. Your problem is here:

    Code:
    		                <script>
    $(document).ready(function () { 
         
        $('nav li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(100);
     
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(100);         
            }
        );
         
    });
    </script>
    So, what this is saying is "on hover of an li within nav, show any ul within that li". Result - both the second and third level uls within your menu are shown.

    Your script should be (for example, there's a few ways of doing this):

    Code:
    $(this).children('ul').slideDown(100);
    The .children selector restricts the selection to the immediate children only, which is what you want.

    Worth mentioning that this is possible with css only, as currently your menu wouldn't work at all for a user with js disabled.

    Your page also appears to be rendering the php code directly if you view the source, so there's something else not right on your server/page.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Well that was just a testing ground just so i could have some idea what its like, but even on my wordpress theme which its intended for (www.masterrenny.com) the drop down still doesnt work correctly
    Last edited by MasterRenny; 02-18-2012 at 12:19 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not surprising, since that page uses css not jQuery for the dropdown.

    Are you trying to implement the jQuery on your Wordpress page - I can't see it anywhere?

    And, actually, the dropdown appears OK on that page, in that only one level is displayed on the initial hover.

    What, exactly, is the problem you're trying to fix?
    Last edited by SB65; 02-18-2012 at 12:46 PM.

  • Users who have thanked SB65 for this post:

    MasterRenny (02-19-2012)

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Not surprising, since that page uses css not jQuery for the dropdown.

    Are you trying to implement the jQuery on your Wordpress page - I can't see it anywhere?

    And, actually, the dropdown appears OK on that page, in that only one level is displayed on the initial hover.

    What, exactly, is the problem you're trying to fix?
    On the Guildwars drop down menu when you get to the uncategorized the links that appear should be at the right but i cant seem to get it to do it :/ Ive aded the jquery animation for it to slide down but it doesnt work for some reason so i removed it

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Edit: Dont Matter, Problem solved thanks for your help.


  •  

    Posting Permissions

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