Results 1 to 8 of 8

Thread: jQuery Multi Level CSS Menu #2

  1. #1
    Join Date
    May 2009
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default jQuery Multi Level CSS Menu #2

    I would like to remove the down arrows in the top level menu items only and leave the right arrows in the submenu items. Can anyone advise me how to change the javascript to accomplish this. Thank you very much.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Not javascript, rather css style. Using a text only editor like NotePad, in the jqueryslidemenu.css file, add the highlighted (around line #83):

    Code:
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    display: none;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2009
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much for the incredibly quick response. I did try this initially, but the length of each top menu item remained the same, as if the down arrow was still there. Is there a way then to get the width of each top level menu item to adjust itself once the down arrow is set to display:none?

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    One quick idea: visibility:hidden is just like display:none, but it simply makes the element invisible rather than not considering it when displaying the page. In this way, it takes up space, but it is still invisible.

    Would that solve the problem?

    Note that using visibility:hidden is actually a little odd sometimes because it can still be interactive. I believe that anything that is "happening" in that element is still active, such as clicking on a link. It could also stop you from being able to access any (now visible) element underneath it.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    That won't help. In fact visibility hidden may create more problems, or not. But that extra space comes from the number 23 (red) here in the jqueryslidemenu.js file:

    Code:
    /*********************
    //* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
    //* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
    //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
    *********************/
    
    //Update: April 12th, 10: Fixed compat issue with jquery 1.4x
    
    //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
    var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
    
    var jqueryslidemenu={
    Open that file up in a text only editor like NotePad and change that red 23 to a 0. Together with the display: none; in the css file, that should take care of it.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    Sorry, I didn't know that extra space was a problem.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    May 2009
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Sorry I didn't respond promptly--was distracted by stomach flu, but now I am working on this again. Here is a link with my test menu. I did as you said and the top level items that would have had down arrows are spaced properly, but the other top menu items are not. I also have two additional issues with this menu that I need to solve in order to use it, but I will start a separate thread since they are completely unrelated. Thank you again.

    http://nasonhouse.com/test/test_nav.html

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    If I understand you correctly, in the jqueryslidemenu.css file make the highlighted change as shown:

    Code:
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    	display: block; /*background of tabs (default state)*/;
    	color: black;
    	padding: 8px 0 8px 10px;
    	text-decoration: none;
    	font-family: "Trebuchet MS";
    	font-size: 12px;
    	font-weight: bold;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ElenaT (12-10-2011)

  9. #8
    Join Date
    May 2009
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That did it, thanks so much! Now, I hope someone will respond to my other questions, so I can finish tweaking the menu and actually use it!

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
  •