SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's my go at the suckerfish drop down menu...need small bit of help

    This is my try at the suckerfish drop down menu....I've got it to work, almost. Here is the code I have:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    <title>Suckerfish Dropdowns</title>
    
    <style type="text/css">
    
    body {
    font-family: arial, helvetica, serif;
    }
    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    }
    li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
    background: #ffffcc;
    border-right: 1px solid #000000;
    }
    li ul { /* second-level lists */
    display: none;
    position: absolute;
    left: 0;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background: #ffffcc;
    }
    li ul a {
    background-color: #ffffcc;
    color: #000000;
    text-decoration: none;
    float: left;
    }
    li ul a:hover {
    background-color: #ccc;
    color: #ffffff;
    width: 140px;
    }
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    }
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }
    #content {
    clear: left;
    }
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    
    </head>
    
    <body>
    <ul id="nav">
    
    	<li>Sunfishes
    		<ul>
    			<li><a href="">Blackbanded sunfish</a></li>
    			<li><a href="">Shadow bass</a></li>
    			<li><a href="">Ozark bass</a></li>
    			<li><a href="">White crappie</a></li>
    		</ul>
    	</li>
    
    	<li>Grunts
    		<ul>
    			<li><a href="">Smallmouth grunt</a></li>
    			<li><a href="">Burrito</a></li>
    			<li><a href="">Pigfish</a></li>
    		</ul>
    	</li>
    
    	<li>Remoras
    		<ul>
    			<li><a href="">Whalesucker</a></li>
    			<li><a href="">Marlinsucker</a></li>
    			<li><a href="">Ceylonese remora</a></li>
    			<li><a href="">Spearfish remora</a></li>
    			<li><a href="">Slender suckerfish</a></li>
    		</ul>
    	</li>
    
    </ul>
    
    <div id="content">
    </div>
    
    </body>
    
    </html>
    First: I would like to have Sunfish, Grunts, and Remoras with a little padding on the left side so they aren't sitting right on the border just left of the text.

    Second: When you roll over one of the items and the drop down menu appears, if you look at where the border meets in the bottom right hand corner, you'll see a pixel or two of separation...what gives?

    Third: When rolling over the words Sunfish, Grunts, or Remoras I would like the background to change to a different color, more or less showing the user what one they have rolled over. I wasn't sure if this was possible or no since the initial menu titles were not links...only the drop down menu has the links.

    Last: This isn't really a big deal, just wanted to see if someone knew how to fix...when the drop down menu is displayed by rolling over either Sunfish, Grunts, or Remoras the menu is a couple pixels offcenter to the right. I wanted it direction under the menu name (either Sunfish, Grunts, Remoras)

    thanks guys,

    -Deron

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    I was away all sunday and missed your post - sorry.

    Ill just go and have a look at the code now but I can tell you that you will need to give ie a top position for it to place its sublists below the top line, otherwise it will place them on top of it.

    Something like this (although haven't tested yet).

    Code:
    li ul { /* second-level lists */
    display: none;
    position: absolute;
    left: 0;top:1em;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background: #ffffcc;
    }
    If you want your top level items to rollover then you will need to turn them into links. (You really should have them as links anyway in case someone has js switched off and you can let that top level list send them to a page with the sublevel menu items on them. That's what I'd do anyway )

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI Deron,

    Not exactly sure where you are going with this but I've added a bit of what you wanted so you can play around with it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Suckerfish Dropdowns</title>
    <style type="text/css">
    body {
    font-family: arial, helvetica, serif;
    }
    ul  { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    position:relative;/* for ie to show borders */
    }
    li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
    background: #ffffcc;
    border-right: 1px solid #000000;
    }
    li ul { /* second-level lists */
    display: none;
    position: absolute;
    left: -1px;top:1em;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background: #ffffcc;
    }
    li ul a {
    background-color: #ffffcc;
    color: #000000;
    text-decoration: none;
    float: left;
    margin:0;
    width: 140px;
    }
    li ul a:hover {
    background-color: #ccc;
    color: #ffffff;
    }
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left:auto;
    margin-left:-1px;
    }
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }
    li a {
     text-decoration:none;
     margin-left:5px;
     display:block;
    }
    li a:hover{
     background:red;
     color:#fff;
    }
    #content {
    clear: left;
    }
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
     if (document.all&&document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i=0; i<navRoot.childNodes.length; i++) {
       node = navRoot.childNodes[i];
       if (node.nodeName=="LI") {
    	node.onmouseover=function() {
    	 this.className+=" over";
    	}
    	node.onmouseout=function() {
    	 this.className=this.className.replace(" over", "");
    	}
       }
      }
     }
    }
    window.onload=startList;
    //--><!]]></script>
    </head>
    <body>
    <ul id="nav">
      <li><a href="#">Sunfishes</a> 
    	<ul>
    	  <li><a href="">Blackbanded sunfish</a></li>
    	  <li><a href="">Shadow bass</a></li>
    	  <li><a href="">Ozark bass</a></li>
    	  <li><a href="">White crappie</a></li>
    	</ul>
      </li>
      <li><a href="#">Grunts</a> 
    	<ul>
    	  <li><a href="">Smallmouth grunt</a></li>
    	  <li><a href="">Burrito</a></li>
    	  <li><a href="">Pigfish</a></li>
    	</ul>
      </li>
      <li><a href="#">Remoras</a> 
    	<ul>
    	  <li><a href="">Whalesucker</a></li>
    	  <li><a href="">Marlinsucker</a></li>
    	  <li><a href="">Ceylonese remora</a></li>
    	  <li><a href="">Spearfish remora</a></li>
    	  <li><a href="">Slender suckerfish</a></li>
    	</ul>
      </li>
    </ul>
    <div id="content"> </div>
    </body>
    </html>
    You may want to look here also for some more suckerfish menus which go in a bit more depth and will probably have answers to what you want.

    http://www.htmldog.com/ptg/archives/000050.php

    Paul

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Sorry to ask a question with it leading seemingly no where. Actually I was hired to do some web design for a small company, nothing major as I'm still just learning, but I figured what better way to learn, when you're getting paid. Anyway, the client wants a drop down menu, so I'm playing around with this and then later will add my own links, etc....

    I actually fixed most everything that I originally needed guidence for...the only thing was the top position for IE. It displayed right in Mozilla, but IE showed the drop list over the original menu...so with the top position declared I should be ready to go.

    The last thing (which you may or may not have answered for me, I havn't tested your code yet) was the menu links (original, not drop down) I am going to go ahead and have them as links as you said. The problem with this is that I cannot get the links to highlight with a background color when you roll over them. I can get them to highligh, but it only highlights the text, not the whole button if you will...hopefully this makes sense to you Paul. I know I'm giving you headaches with explainin everything with little or no code. I should have the internet shortly. lol. If this makes no sense I'll try to post some code later.

    -Deron

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    If you copy the above code and then change these 2 styles you should get more or less what you want.

    Code:
    li ul a {
    background-color: #ffffcc;
    color: #000000;
    text-decoration: none;
    float: left;
    margin:0;
    width: 140px;
    padding-left:0px;
    }
    li a {
     text-decoration:none;
     padding-left:5px;
     display:block;
    }
    These menus are a little bit awkward to implement when you start adding padding and widths etc but there is usually a solution in there somewhere

    Paul

  7. #7
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I may be mistaken, but I believe the code you supplied above was for the actual menus that drop down, not the original menu.

    I was actually talking about the sunfishes, grunts, and remoras links on the original menu. I can get them to highlight, but only the text highlights when rolled over, not the whole area which would be like 140px or so wide...?

    For the code above, I've got the background color stated and a width or 140px which takes up the area of the drop down menu when a link is rolled over. I don't know, maybe I'm wrong. I'll try it and see.

    -Deron

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what exactly is the difference in widths in em's and px?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I may be mistaken, but I believe the code you supplied above was for the actual menus that drop down, not the original menu.
    You lost me there deron lol.

    The code I posted first refers to your code in your first post. The last snippet of code was for a change in my solutuin.

    Code:
    what exactly is the difference in widths in em's and px?
    Ems are relative units and their dimensions are based on other factors. one em is defined to be the value of font-size for a given font.

    So if you set a dimension of 3 ems for an element that has a font-size of 14px then the width will be 3 x14 pixels = 42px. So if the user increases text size then the width also increases relatively thus keeping everything in proportion.

    Paul

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I thought you were supplying code for another question I asked.

    Anyway, I'll try to explain. basically if you check out my other site deronsizemore.com you can see how when you roll your cursor over a link the background displays white....this is basically the same effect I'm looking for with the suckerfish example. I've achieved a green tint background when the cursor rolls over the links on the actually menu that drops down, but as for the links Sunfish, Grunts, or Remoras I cannot get the background to hightlight a different color, I can get the text background to highlight a different color, but not the whole button. lol...its cool if I'm just confusing you Paul. If so I'll just try to post some code tomorrow.

    -Deron

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI Deron,

    Yes you have lost me lol.The code I posted above will roll over the whole line.

    I'll wait until you post dome code again

    Paul

  12. #12
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, I'll just try your code out first. You probably answered everything I needed to know, but I've not had a chance to try it yet. I'll get back with ya Paul. Thanks

  13. #13
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul....Your code worked great! Next time I'll try your code before asking more questions!

    I did have one more though...on a different subject. How do I center the links in the menu? Right now I'm using non breaking spaces but I realize this is a crappy way to do it...

    -Deron

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about the text then have you tried text-align:center?

    Or do you mean something else?

    Paul

  15. #15
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I tried that I belive and it jstu mucked it all up..

    For example Sunfished, Grunts, and Remoras on the main menu...rather than left aligned I wanted them to be centered.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well assuming you want the sublist left aligned then I thought something like this should work .

    Code:
    ul#nav li {text-align:center}
    ul#nav li ul li {text-align:left}
    Paul


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
  •