Jump to content

Expand Css Menu By Maximum Entry Length


justinbriggs1
 Share

Recommended Posts

Hello everyone, I have a CSS menu question if you don't mind.The site in question is www.adcuda.comI have been trying to get the dynamic navigation bar on the main page to expand to the width of the longest entry. In this case, it is the one under Solutions-->Additional Services that reads "Extra long page name to test menu wrap". By default it wraps, but I would like it to expand. Trial and error doesn't seem to be getting a lot of results. Can anyone help me out? Thanks,JW

Link to comment
Share on other sites

I'm assuming it's a css menu with some javascript in the background. Could we see the css?
Sure, here are the important parts:/* navigation */#top #nav{float:right;position:absolute;top:20px;right:60px;}#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:32px; z-index:3;}#top #nav a{display:block;padding:0px 15px;text-decoration:none;text-align:center;line-height:33px; outline:none;}#top #nav a:hover{text-decoration:underline;}#top #nav li{float:left;position:relative;}#top #nav li li{border-left:none;}#top #nav ul {position:absolute;display:none;width:170px;top:33px;}#top #nav li ul a{color:#f4f4f4;white-space:nowrap;width:auto;height:auto;float:left;border:1px solid #181818;text-align:left;}#top #nav ul ul{top:auto;} #top #nav li ul ul {left:172px;top:0px;}And here is the javascript if it is required:function kriesi_mainmenu(){ if(!jQuery.browser.msie){// IE - 2nd level Fix jQuery(" #nav ul ").css({opacity:"0.95"}); }jQuery("#nav a").removeAttr('title');jQuery(" #nav ul ").css({display: "none"}); // Opera FixjQuery(" #nav > li > ul").parent().find("a:first").append("<span class='sub_list'> </span>");jQuery(" #nav ul li > ul").parent().find("a:first").append("<span class='sub_sub_list'> </span>");jQuery(" #nav li").hover(function(){ jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ jQuery(this).find('ul:first').css({visibility: "hidden"}); });}
Link to comment
Share on other sites

Try this, change this:
#top #nav ul {position:absolute;display:none;width:170px;top:33px;}

To this:

#top #nav ul {position:absolute;display:none;min-width:170px;top:33px;}

Thanks, but the min width isn't really going to help in this situation, as I need the <li> anchors to adjust the size of the container. I can make this happen, but then the menu is full of jagged entries. I need the longest entry to determine the width of the other boxes, which is my problem.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...