Solved

Variable width of drop down menu items

Posted on 2010-09-01
8
414 Views
Last Modified: 2012-05-10
Hello Experts!

I'm trying to create a drop down menu with a fly out for sub lists in the menu.  If I set the width to fixed width of any parent li items in my style sheet that seems to work but what I'd rather do is set the the list to the width of its largest item.  I've done width: auto and whitespace: nowrap on every ul, li, and a tags in my spreadsheet but I can't seem to get this working right.  Any suggestions would be appreciated!
here is my html



    <div id="main_top_panel">

        

          <div id="navigation_panel">

            <div id="topmenu">

            

                <li>

                    <a href="index.html" class="home">Home</a>

                </li>

                

                

                <li>

                    <a href="about-us.html" class="about_us">About&nbsp;Us</a>

                </li>

                

                

                <li >

                    <a href="products.html" class="project">Products </a>

                    <ul >

                         <li >

		                    <a class="fly" href="#NOGO">Building Permits</a>

		                    <ul>

		                        <li><a href="#nogo">Overview</a></li>

		                        <li><a href="#nogo">Coverage Areas</a></li>

		                        <li><a href="#nogo">View A Sample</a></li>

		                        <li class="last"><a href="#nogo">Order Now!</a></li>

		                    </ul>

		                 </li>

		                 <li><a href="#NOGO">Pool Permits</a></li>

		                 <li><a href="#NOGO">New Home Sales</a></li>

		                 <li><a href="#NOGO">Foreclosure Data</a></li>

		                 

		                 <li class="last"><a href="#NOGO">Vacant Land Transactions</a></li>

		             </ul>   

		        </li>             

		              

                    <li>

                        <a href="services.html" class="service">Services </a>

                    </li>

                

                <li>

                    <a href="#" class="client">Clients </a>

                </li>

                

                <li >

                    <a href="#" class="blog">Blog </a>

                </li>

                

                <li class="last">

                    <a href="contact-us.html" class="contact_us">Contact&nbsp;Us </a>

                </li>

                

                

                 <div id="login" style="float: right;">

                     <asp:Login ID="Login1" runat="server" Orientation="Horizontal" 

                      RememberMeText="Remember me" TextLayout="TextOnTop" TitleText="" 

                      UserNameLabelText="Email:">

                     </asp:Login>

                 </div>

            </div>

            </div>

          </div>



here is my css





#topmenu  

{

    margin:0px; 

    padding:20px 0px 0px 0px; 

    

}



#topmenu ul 

{

    padding:0; 

    margin:0; 

    list-style:none; 

    float:left; 

    background:#fff; 

    border-top:1px solid #fe7; 

    border-color:#fe7 #b80 #b80 #fe7;

    width: auto;    

    white-space: nowrap;

}



#topmenu li

{

    float:left;

}



#topmenu li ul

{

    display: block; 

    width: auto;

    white-space: nowrap;

}



#topmenu li li

{

    float:none;

    border-left:1px solid #fe7; 

    border-right:1px solid #b80;

}



#topmenu li li.last 

{

    border-bottom:1px solid #b80;

}



/* a hack for  IE6 */

* html #topmenu li li 

{

    float:left;

}



#topmenu ul li  

{

    display:block; 

    float:left;	

    list-style:none;

    width: auto;

    white-space: nowrap;

}





#topmenu li a 	

{

    font:bold 12px Georgia, "Times New Roman", Times, serif;

    color:#8f8c8c;

    text-decoration:none;

    display:block;

    float:left;

    padding:10px 10px 0px 10px ;

    line-height:36px; 

    white-space: nowrap; 

    width:  inherit;

}





#topmenu li a.home

{

    background:url(../images/home.gif) top no-repeat;

}    



#topmenu li a.about_us 

{

    background:url(../images/about_us.gif) top no-repeat;

}



#topmenu li a.service 	

{

    background:url(../images/service.gif) top no-repeat;

}



#topmenu li a.project 

{

    background:url(../images/project.gif) top no-repeat;

}



#topmenu li a.client 

{

    background:url(../images/client.gif) top no-repeat;

}



#topmenu li a.blog 	

{

    background:url(../images/blog.gif) top no-repeat;

}

    

#topmenu li a.contact_us 	

{

    background:url(../images/contact_us.gif) top no-repeat;

}





#topmenu li li a 

{

    display:block; 

    height:20px; 

    line-height:20px; 

    float:none; 

    padding:0px 25px 0px 5px ; 

    font-weight:normal; 

    letter-spacing:1px;

    white-space: nowrap;

    width: auto;

}



#topmenu li li a.fly 

{

    background:url(fly.gif) no-repeat right center;

}



#topmenu li:hover 

{

    position:relative; 

    z-index:300;

}



#topmenu li.cssplay_hover 

{

    position:relative; 

    z-index:300;

}



#topmenu li.cssplay_hover a 

{

    color:#000;

}



#topmenu li li a 

{

    color:#000;

}



#topmenu li li.cssplay_hover a 

{

    color:#fff; 

    background-color:#d5aa00;

}





#topmenu li:hover ul 

{

    left:0; 

    top:33px; 

    z-index:500;

}



#topmenu li.cssplay_hover ul 

{

    left:0; 

    top:33px; 

    z-index:500;

}



#topmenu ul 

{

    position:absolute; 

    left:-9999px;

    top:-9999px;

}



* html #topmenu ul 

{

    width:2px;

}

/* it could have been this simple if all browsers understood */

/* show next level */

#topmenu li:hover li:hover > ul 

{

    left:-5px; 

    margin-left:100%; 

    top:-1px; 

    z-index:500;

}

/* keep further levels hidden */

#topmenu li:hover > ul ul 

{

    position:absolute; 

    left:-9999px; 

    top:-9999px; 

    width:auto; 

}



/* show path followed */



#topmenu li:hover > a 

{

    color:#000;

}



#topmenu li li:hover > a 

{

    color:#fff; 

    background-color:#d5aa00;

}





#topmenu li a:hover  

{

    color:#000;

}

Open in new window

0
Comment
Question by:JeffreyDurham
  • 4
  • 2
  • 2
8 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 33592532
I believe the only way you could do this is use javascript to loop through your list when the DOM has loaded and set the width based on what it finds.

btw - you should check your code conforms with the html standard as i've found a few issues with it... like div tags not closed in the right places etc

I've fixed up your code and included a javascript library that we'll use later once the code is working.  You see when the code is cleaned up nothing shows.... i'm curious to why you've used the following:
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:auto;

instead of a display: none ??
index.zip
0
 
LVL 42

Expert Comment

by:David S.
ID: 33592829
@tagit

Absolutely positioning an element off the top and/or left sides of a document allows assistive software, like screen-readers, to "see" the links. If display:none or visibility:hidden were used instead, such software would not provide access to the links for visually impaired users.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 33592837
@Kravimir - i understand what you're saying but isn't the reason it is off the screen so that users don't "see" it??  Surely the screen reader software would see these elements once display is set to "block" or "inline"??
0
 
LVL 42

Expert Comment

by:David S.
ID: 33592938
@tagit

Many drop-down menu systems show sub-menus via hover/mouseover. People who use assistive devices don't use a mouse to trigger such an action (and neither do users of tablet devices, like iPad, for that matter).  Yes, if the sub-menus were made visible via a click event instead, there wouldn't be the same problem. However, before using display:none with a click event, I'd ask the opinion of someone who knows more about screen-reader users than I. http://www.accessifyforum.com/ might be a good place to ask such a question.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 33592993
you have a fair point re the :hover

I think the first issue here however is getting the code to work
0
 

Author Comment

by:JeffreyDurham
ID: 33599574
Sorry about that guys, I guess it would have made sense to include the entire html, i had truncated the part I couldnt get to work but didnt test it first :P.  




expertsdemo.zip
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 33607962
Hi,
I've added the javascript so that it makes all the items the same width.  You might want to tweak it so that it doesn't make the top level elements  that width too?

I also had to add <ul> tags for the toplevel and I moved the #id toplevel into the <ul> from the <div>


experts.zip
0
 

Author Comment

by:JeffreyDurham
ID: 33686893
it looks like it was that top level ul that I was missing that seemed to have broken everything... i got it working after fixing that and just readjusting the rest of the css to include it, thanks for your help!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now