Solved

suckerfish dropdowns

Posted on 2004-08-17
17
517 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 3
  • +1
17 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11824060
>> 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
ID: 11824097
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
ID: 11824364
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:MTIWR
ID: 11824398
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
ID: 11824420
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
ID: 11824441
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
ID: 11825978
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
ID: 11826447
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
 

Author Comment

by:MTIWR
ID: 11827268
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
ID: 11827285
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
ID: 11827407
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
ID: 11828219
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
ID: 11830442
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
ID: 11830650
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
ID: 11830806
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
ID: 11831256
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
ID: 11831430
>>Can I do that???
Absolutely.
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
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.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

688 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