Solved

suckerfish dropdowns

Posted on 2004-08-17
17
512 Views
Last Modified: 2008-01-16
I want to be able to combine two techniques really. But I've sort of hit a brickwall. I can't figure out how to combine CSS Rollovers (mentioned directly below) with Suckerfish Dropdowns. Is it possible? seanpowell, I could really use your help again!

Here's the CSS and HTML for a page where I used a technique from http://alistapart.com/articles/sprites/ called "CSS Sprites: Image Slicing’s Kiss of Death".

CSS:
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
text-align: left;
}
#buttons {
width: 574px;
height: 38px;
background:  url(menu.jpg);
margin: 0 0 0 0;
padding: 0;
position: relative;
}
#buttons li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#buttons a {display: block; border: 0;}
#button1 {left: 0px; top: 0px; width: 123px; height: 38px;}
#button2 {left: 93px; top: 0px; width: 163px; height: 38px;}
#button3 {left: 226px; top: 0px; width: 155px; height: 38px;}
#button4 {left: 351px; top: 0px; width: 143px; height: 38px;}
#button5 {left: 464px; top: 0px; width: 110px; height: 38px;}
#button1 a {height: 38px;}
#button2 a {height: 38px;}
#button3 a {height: 38px;}
#button4 a {height: 38px;}
#button5 a {height: 38px;}
#button1 a:hover {background:  url(menu.jpg) 0px -38px no-repeat;}
#button2 a:hover {background:  url(menu.jpg) -93px -76px no-repeat;}
#button3 a:hover {background:  url(menu.jpg) -226px -38px no-repeat;}
#button4 a:hover {background:  url(menu.jpg) -351px -76px no-repeat;}
#button5 a:hover {background:  url(menu.jpg) -464px -38px no-repeat;}

HTML:
<ul id="buttons">
      <li id="button1"><a href="#"></a></li>
      <li id="button2"><a href="#"></a></li>
      <li id="button3"><a href="#"></a></li>
      <li id="button4"><a href="#"></a></li>
      <li id="button5"><a href="#"></a></li>
</ul>

Here's a handy link if you'd like to see the page itself. It's got other code with it, though.
http://rayandamy.com/tomansys/menu2.html

Now here's a page from htmldog.com that gives an example of the type of dropdown menu I'm looking for.
http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html

Now, can these two techniques be combined? Will someone please show me how if indeed it is possible? I'd give more points than 500 if I was able to for this.
0
Comment
Question by:MTIWR
  • 7
  • 5
  • 3
  • +1
17 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>> can these two techniques be combined?
Yes, but I knew I shouldn't have had that second scotch.

Back in a bit...
0
 

Author Comment

by:MTIWR
Comment Utility
Here's another example:
http://rayandamy.com/toms/test2.html

In this example I've used the dropdown menus, but if you look at the code, each button has two different images. I'd like to keep the same look that I've got now, but only use one large image like I did in the first example. And not just one large image for each button, but for the entire row of buttons. http://rayandamy.com/tomansys/menu2.html
0
 
LVL 13

Expert Comment

by:flow79
Comment Utility
this might help you -
it is a very basic version of a DHTML dropdown - you will obviously have to style it properly - but it will allow for rollovers and also uses the onMouseOver and onMouseOut events to allow the dropdown to occur.  Good luck with your project!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script language="JavaScript" type="text/javascript">
<!--

function show(){
      menu1.style.visibility = 'visible';
}

function hide(){
      menu1.style.visibility = 'hidden';
}

//-->
</script>

</head>
<body>

<a href="#" onMouseOver="javascript:show();" onMouseOut="javascript:hide();">Rollover me</a>
<table summary="" name="menu1" id="menu1" style="visibility: hidden;">
                  <tr>
                        <td>1</td>
                  </tr>
            </table>


</body>
</html>
0
 

Author Comment

by:MTIWR
Comment Utility
I'd really like to only use CSS only. Is there a way to do that without resorting to javascript?
0
 
LVL 13

Expert Comment

by:flow79
Comment Utility
i dont think so - if you want them to dropdown - you will need to use events such as onMouseOver and onMouseOut.  There is no CSS equivalent of those events (CSS only defines style, not action)
0
 
LVL 13

Expert Comment

by:flow79
Comment Utility
a nice example (of my own creation) can be found at:

http://www.albany.edu/faculty/mackey/isp361/spring2003/final/brennan/

it uses text instead of images for the main labels, but it can be easily altered to do what youd like - view the source to see how i did it
0
 

Author Comment

by:MTIWR
Comment Utility
Okay, I know I said CSS only but what I meant was I wanted an answer that did not rely heavily on Javascript. If you look at the examples I've given, you'll see that only the Suckerfish Dropdowns has Javascript in it, and even then it's only a few lines. I'd like to stick to that if possible. flow79, I'd rather stay with using nested unordered lists too. I don't want to use tables for something that should be marked up as a list.

I promise to give an A to the person who can tell me how to combine those two techniques.
0
 
LVL 13

Expert Comment

by:flow79
Comment Utility
fine - then use a ul and assign the same CSS i gave for the table (visibility: hidden and visibility: visible).  This is not that difficult.  You  keep saying you dont want to rely on Javascript, but you already do (and will have to if you want to use DHTML).  If you dont like my solution, fine, but i'm only here to help, and have provided two examples (one of which is complete - the link).  As you said yourself just now - you said your dropdowns have JS in them.  The amount of JS (whether alot or a little - and believe me, the scripts i've given you are TINY) doesnt matter.  If a user has JS turned off, either way youre out of luck.  I would say try my solution and modify it to what you already have.  Its a very good solution
0
Highfive Gives IT Their Time Back

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!

 

Author Comment

by:MTIWR
Comment Utility
I tried using the source from the link you gave, flow79, but ran into one problem. The code you gave works great for a vertical list, but not so well for a horizontal list. I changed one of the tables to an unordered list and played around with the styles until I got the nested list right underneath the top link "Home". I did that to imitate the conditions I'd use it since I have to use a horizontal list. (See my example from my second post.) The JS you have makes you have to call some element "home" or whatever word you define. I didn't want my ul to show up until I moused over the top link so I gave the ul the id "home". But when I did that, the dropdown list would actually appear when I moused over the list itself and not just the top link. That's a problem because users will end up making the dropdown lists appear when they don't want them to.
Any help?

Also, may I still ask for your help, seanpowell, since you said that my original idea could actually be done?
0
 
LVL 13

Expert Comment

by:flow79
Comment Utility
if you can post the altered code you have created, i will fix it up so that it works properly.
0
 

Author Comment

by:MTIWR
Comment Utility
Okay, here's the page with the altered code.
http://rayandamy.com/toms/dropdown2.html

Now what about using CSS rollovers and your JS at the same time? That's the real challenge. That's what I really want - CSS rollovers and the dropdown menu.

Thanks for working this, flow79.
0
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
Comment Utility
Ok, I got an alternate suggestion. I usually build menu's based on a different solution developed by a  guy I know: http://www.xs4all.nl/~peterned/csshover.html

Instead of adding javascript regardless this is a solution which uses a behaviour to create events on the fly to fix IE and enable the :hover pseudoclass on any element (based on what's targetted by your css).
I've prepared an example based on your original link at: http://www.windgazer.nl/eexchange/Q_21097085.html

relevant changes to your css:
#buttons a:hover {background:  url("Q_21097085/menu.jpg") 0px 0px no-repeat;}
#button1 a:hover {background-position: 0px -38px;}
#button2 a:hover, #button1_1 a:hover {background-position: -93px -76px;}
 ul li#button1_1 a { background-position: -93px 0px; }
#button3 a:hover, #button1_2 a:hover {background-position: -226px -38px;}
 ul li#button1_2 a { background-position: -226px 0px; }
#button4 a:hover, #button1_3 a:hover {background-position: -351px -76px;}
 ul li#button1_3 a { background-position: -351px 0px; }
#button5 a:hover {background-position: -464px -38px;}

/*Making submenu's work*/
#buttons ul { margin: 0; padding: 0; border: 0; position: relative; left: 1em; display: none; }
#buttons li:hover ul { display: block; }
#buttons ul li {position: relative; border: 0;}
#buttons ul a {position: relative; border: 0; height: 38px; background:  url("Q_21097085/menu.jpg") 0px 0px no-repeat;}

And at flow79's remark "i dont think so - if you want them to dropdown - you will need to use events such as onMouseOver and onMouseOut.  There is no CSS equivalent of those events (CSS only defines style, not action)".
You do not need those events when using a CSS2 browser. IE needs those events as it is not truly a CSS2 browsers it doesn't even fully support CSS1. Relevant documentation: http://www.w3.org/TR/CSS2/selector.html#x39

Well, let me know what you think MTIWR,

 Martin
0
 

Author Comment

by:MTIWR
Comment Utility
Okay, Martin, this is a very nice way of doing drop down menus. I get to use CSS rollovers for everything. But I'm having a bit of trouble! I've only gotten the first button "Main" to work as it should.

Here's a link to what I've done so far: http://rayandamy.com/toms/csshover3.html

Will you please take a look at it and show me how to fix it?
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Crazy day yesterday, sorry.
Martin seems to have gotten you back on track nicely.

This is a quick mockup since I promised a suckerfish/sprite solution, but I'll leave you in Martin's capable hands to follow through with his alternative :-)
http://www.pdgmedia.com/ee/marvel.html

Thanks,
Sean
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
Well, it took me a while to catch on to this one :) But, how about this: http://www.windgazer.nl/eexchange/Q_21097085b.html

I made a few minor changes to make things work better on gecko browsers, mainly involving giving generally all a-tags in the dropdowns a height:
#buttons a {display: block; border: 0;height: 37px;}
 
Other than that, something so simple it took me quite some time to notice:
#button2 a:hover {background-position: 49px -37px;}
should have read:
#button2 a:hover {background-position: -49px -37px;}

You were displacing the sprite in the wrong direction :)

Martin
0
 

Author Comment

by:MTIWR
Comment Utility
Can I give both Sean and Martin points for this solution? Both of you guys came up with a really awesome solution to this problem! I'm going to split points with you two unless you'll allow me to ask you one more favor, Sean. I'll start a new question since I've got your solution working beautifully in IE but it wants to act wierd in FF. I'll give all the points to Martin on this on and then give you, Sean, the points on the next question. Can I do that???

Here's what I've got with Sean's solution:
http://rayandamy.com/toms/marvel2.html
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>Can I do that???
Absolutely.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

772 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

15 Experts available now in Live!

Get 1:1 Help Now