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 10 of 10
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    problem with <ul> width in dd menu

    Hi,

    I have used Suckerfishes dd menu with 6 levels and whilst it works, the css isn't quite perfect. (Only checked in FF as I haven't begun the hacks for IE yet).

    I would appreciate a tip on how to make the last list, to flyout, to display the ul at the full width of the longest item. Fromn the source code below, you should see that the last item proturdes beyond the background until you hover it.

    I have tried a few css changes but I am out of ideas now.

    Please help.

    bazz

    opps better add the source code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    
    <head>
    <title>Suckerfish Dropdowns - Three Level Bones</title>
    
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, serif;
    }
    #mainDD {
    	font-fanily : "Arial", verdana, sans-serif, helvetica;
    	background-color : #940031;
    	width : 100%;
    	height : 25px;
    	text-align : left;
    }
    
    #nav, #nav ul { /* all lists */
    	padding: 0px;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    	color: #eeeeee; 
    }
    
    #nav a {
    	
    	display: block;
    	width: 10em;
    	color : #aaaaaa;
    }
    
    #nav a:link, #nav a:visited, #nav a:active, #nav a:hover {
    color : #aaaaaa;
    text-decoration : none;
    background : #940031;
    /*font-size : 0.95em;*/
    width : 100%;
    }
    
    #nav li { /* all list items */
    
    	float: left;
    	width: 7em; /* width needed or else Opera goes nuts */
    	/*background : #940031; /* THIS IS THE CSS FOR THE TITLE LINKS */*/
    }
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    	line-height : 20px;
    	width: 7em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    background : #940031;
    }
    
    #nav li ul ul { /* third-and-above-level lists */
    	margin: -1em 0 0 7em;
    	left : -999em;
    background : #940031;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li:hover ul ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul, #nav li.sfhover ul ul ul ul ul ul {
    	left: -999em; /* added by me */
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li li li li li li:hover ul,  #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul, #nav li li li li li li.sfhover ul { /* lists nested under hovered list items */
    left : auto;
    top : 25px;
    }
    #nav li li li li li li:hover a, #nav li li li li li li.sfhover a { 
    padding : 0 25px 0 0 ;
    
    }
    #content {
    	clear: left;
    	color: #ccc;
    }
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    
    </head>
    
    <body>
    
    <div id="control_panel_index_pages">
    <div id="mainDD">
    <ul id="nav">
      <li>
        Accommodation
        <ul>
        <li>
          Antrim
          <ul>
          <li>
    
            <a href="3Star">3Star</a>
    
            <ul>
            <li>
              <a href="#>town</a>
              <ul>
              <li>
                Hotel
                <ul>
    
                <li>
                  <a href="#">businessname</a>
    
                </li>
              </ul>
              </li>
            </ul>
            </li>
          </ul>
    
          </li>
        </ul>
        </li>
    
        <li>
          county
          <ul>
          <li>
            <a href="#">star rating</a>
    
            <ul>
            <li>
              <a href="town"></a>
    
              <ul>
              <li>
                Guesthouse
                <ul>
                <li>
    
                  <a href="#">buisinessname</a>
                </li>
              </ul>
              </li>
    
            </ul>
            </li>
            <li>
              <a href=""></a>
    
              <ul>
              <li>
                Guesthouse
                <ul>
                <li>
    
                  <a href="#">business name</a>
                </li>
              </ul>
    
              </li>
            </ul>
            </li>
          </ul>
          </li>
    
          <li>
            <a href="null">null</a>
            <ul>
    
            <li>
              <a href="Bangor">Bangor</a>
              <ul>
              <li>
                BnB
                <ul>
    
                <li>
                  <a href="">businessname</a>
    
                </li>
              </ul>
              </li>
            </ul>
            </li>
          </ul>
    
          </li>
        </ul>
    
        </li>
      </ul>
      </li>
      <li>
        Attraction
        <ul>
        <li>
    
          Down
          <ul>
    
          <li>
            <a href="Monument">Monument</a>
            <ul>
            <li>
              <a href="Newtownards">Newtownards</a>
              <ul>
    
              <li>
    
                Historic
                <ul>
                <li>
                  <a href="#">name</a>
                </li>
              </ul>
              </li>
            </ul>
    
            </li>
          </ul>
          </li>
        </ul>
        </li>
      </ul>
      </li>
    </ul>
    </body></html>
    Last edited by bazz; 08-17-2005 at 11:38 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #nav li li li li li li:hover a, #nav li li li li li li.sfhover a { padding: 0pt 25px 0pt 0pt; }
    It seems to be this line of CSS that correctly extends the background to the full length of the text on hover. Maybe just remove the :hover? Is that what you're after.

    Just an opinion, but a menu 6 levels deep seems like too much. As a visitor, I would rather be given the ability to drill down through some top level categories rather than have every available page presented at once. Just a thought...
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thanks mcdougals4all for the reply. I'll try that.

    I appreciate your opinion too .

    I, too, have had my doubts about so many levels. I started out with the intention of enabling visitors to get straight to their page of interest in one click which could enable me to remove 'index pages', which clog up the search engine results. I mean if a search engine finds what the visitor is looking for, (a specific business), they won't really know about it because so many 'directories' have clogged up the top results.

    But I admit, I haven't finally decided and, also, five tiers does look a bit strange.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Six levels of drop downs is definitely too much. I don't want to be too mean or whatever about it but that sounds really ugly. I would probably never use more than three levels of drop downs. You know there is another type of similar menu possible with just CSS that might accomodate your enormous menu a little better.

    Here is the CSS Hybrid Menu.

    These menus I think over all are much better than suckerfish drop-downs and certainly seems like they will be for your needs. Also probably won't take a lot to convert your current drop downs to these if you so wish. Good luck.
    Once I thought I was wrong but I was mistaken.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    heh heh.

    I think that is what I am using but if I recall correctly, I got it from the Suckerfish site. you can see it at the top of the page.

    here's a link which I'll take down soon.


    Is it bad? I need to enbale access from the menu to the specific accommodation. Is there another way without trudging through many pages?

    Bazz
    Last edited by bazz; 08-17-2005 at 11:39 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well in IE6 your site is displaying no drop down effect at all and suckerfish is a fair bit different than the hybrids. Observe:

    Hybrid CSS menus

    Suckerfish CSS menus

    Pretty big difference in my opinion. The suckerfish is good for basic drop-downs but the hybrid is much better if you have a lot of items to manage. Otherwise the drop-downs will get too cluttered-looking.

    Upon looking at your site in firefox to see the drop downs (that means you have a lot more work to do because 90% of your traffic cannot navigate your site right now) I think that mostly you are just making your lists absolutely needlessly lengthy and complicated. If there is no need to divide content that many times why bother? You need to simplify your list... big time.

    You also need to remove the title "suckerfish drop downs" from your <title> tag.
    Once I thought I was wrong but I was mistaken.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thanks Tristan,

    I have repaired the CDATA so that it now woroks in ie 6 thouygh I have to work on the CSS still.
    Thanks too for the tip about the title.


    Bazz
    Last edited by bazz; 08-17-2005 at 11:39 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great stuff, the menus are now displaying for me. I still think you should try to have less levels to your menus as most of the levels don't have anything in them anyway so you could probably find another way of grouping the accomodations that would be simpler. But they work as is now anyway and don't look too bad.

    Another thing I noticed was that the banner photo is takne on a slight angle and so the perspective is a little off. This is not bad in itself but given the straight lines above and below it in the layout I noticed an odd optical illusion occuring that makes your page appear to be slanted slightly on a glance. It is a neat little effect but maybe not one you want to have. See if it's just me and my crazy mind because I do a lot of escher-esque designs for fun and have a bit of an eye for such distortions. Other than that maybe content could have less of a margin and be closer to a left justfication rather than centered.

    Looking good though, a few more tweaks and you should be all set. Do the menus work in older IE versions? < IE 5.5?
    Once I thought I was wrong but I was mistaken.

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you Tristan.

    I haven't finished the css yet as I am trying to get the whole thing working - first major project and all that I'll have a bit of a job there when I get around to that

    re. the left justification, did you mean that the text block should remain justified but moved left a little? Maybe something like that would lift the page from being so-o-o-o-o symetrical yet keep it clutter-free?


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah that was the idea, it just seems a little too centred or something. Give it a try and if it looks uglier than before then just put it back heh.

    The perspective thing is just because the solid edge on the roof of the house is slanted rather than straight and the surrounding lines are 'almost' parallel to it but not quite thus creating that diagonal sort of effect.

    Sort of neat exploiting how the brain resolves images.
    Once I thought I was wrong but I was mistaken.


  •  

    Posting Permissions

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