Results 1 to 8 of 8

Thread: jQuery multi-level menu- drop Up instead?

  1. #1
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

    Default jQuery multi-level menu- drop Up instead?

    My friend modified the jquery slide menu from Dynamic Drive, click here to see it. We added a slider thing like http://coldbeep.co.cc/ Now the drop down sorta works. You have to have ninja fast skills to click on a drop down item. Thats because the slider is above the menu and when you go to select a drop down item it thinks you are off the link so it goes away... and it really looks cool with the slider on the bottom and sorta point less with it on the top... so I decided that we should make the items drop up. What would I need to change in order to make the items drop up so it isn't in the way of the slider... BTW here is the css code
    Code:
    html, body{
    	background: url(../media/background.gif);
    	font-family: Calibri, Arial;
    	}
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: url(../media/menubghover.gif);
    border: 1px solid #FFFFFF;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: url(../media/menubghover.gif);
    color: white;
    padding: 8px 10px;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    z-index: 100;
    left: 0;
    top: 10px;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    .jqueryslidemenu ul li ul li a:hover{
    color: #4CFF00 !important;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 15px Calibri;
    background: #FFFFFF;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    color: #000000 !important;
    border-top-width: 0;
    border: 1px solid #4CFF00;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    color: #4CFF00 !important;
    background-color: #EEEEEE !important;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
    .content{
    background-color: #FFFFFF;
    border: 1px solid #A0A0A0;
    }
    .top {
    	background: url(../media/topdivbg.png);
    	height: 30px;
    	}
    .bottom {
    background: url(../media/bottomdivbg.png);
    height: 30px;
    font-size: 11px;
    color: #888888;
    }	
    h1{
    	color: #A0A0A0;
    	font-size: 19px;
    	padding-left: 5px;
    	}
    p{
    	text-indent: 15px;
    	color: #777777;
    	
    	}
    	
    #slide {
    margin-top: 25px;
    position:absolute; 
    height: 3px; 
    background-color: #FFFFFF;
    z-index:10;
    }
    //slider^^
    Thanks!
    Last edited by Rockonmetal; 11-09-2008 at 11:10 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Warning: Please include a link to the DD script in question in your post, in this case: http://www.dynamicdrive.com/style/cs...el_css_menu_2/.

    If you mean have all the sub menus drop up, find the line:

    Code:
    $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
    inside the .js file, and replace that with:

    Code:
    $subul.css({top:this.istopheader? -this._dimensions.subulh+"px" : -this._dimensions.subulh+this._dimensions.h})
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    Rockonmetal (11-09-2008)

  4. #3
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

    Default

    Thanks admin! Sorry bout forgetting to link to the script!

  5. #4
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello, I very much appreciate the above help. I don't want to be greedy, but I have an additional request. If it isn't too much trouble, I was wondering how I should modify the code to make the animation draw from the bottom to the top so that the menu appears to pop out of the top of the bar instead of still drawing top to bottom as if the menu were still a pop-down menu. The reason I'm asking is because I'm working with a very large "drop-up" menu, and the animation is rather awkward because the menu is long. Thank you in advance for any help.

  6. #5
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Nice. This is what I'm looking for some quite time. what would be the code if we implement both drop up and drop down in the same page. appreciate to get the reply soon. Thanks

  7. #6
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    to animate upwards, change 'top' to 'bottom'

    $subul.css({bottom:this.istopheader? -this._dimensions.subulh+"px" : -this._dimensions.subulh+this._dimensions.h})

  8. #7
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Jingleballs,

    Your solution isn't working for animating it upwords ?

    Does anyone know how can we animate it upwords - (exactly what NeoBasilisk second question is) ?

    Thanks

  9. #8
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by javascript_user View Post
    Hi Jingleballs,

    Your solution isn't working for animating it upwords ?

    Does anyone know how can we animate it upwords - (exactly what NeoBasilisk second question is) ?

    Thanks
    Hi there this is an ld thread i know.

    but if you need a soloution for the drop up i have something you can do:

    the problem is because script uses $jQuery().slideUp(); and $jQuery().slideDown()

    this methods functionality is limited, it can only open by rvealing the content from the top down (expanding) and colapse upwards from bottom to top (closing)

    you can however use the jquery UI to enable .show and . hide which allows more configuration in how an element opens/closes.
    you can get jQueryUI from here: http://www.jqueryui.com

    http://www.jqueryui.com

    download jquery ui put it in your scrips folder and link to it:
    (right after the entry for jquery)
    <script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    In the js for the menu look for the slideDown() call :
    .slideDown(jqueryslidemenu.animateduration.over)

    replace it with:
    .show("blind", { direction: "up"} , jqueryslidemenu.animateduration.over)

    look for the slideUp call:
    $targetul.slideUp(jqueryslidemenu.animateduration.out)

    and replace it with:
    $targetul.hide("blind", { direction: "left"}, jqueryslidemenu.animateduration.out)

    that should work for you it did for me.

    you might want to play around with the effects and direction

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
  •