?
Solved

Can I control the width and/or appearance of individual menu items with the Son of Suckerfish Dropdown?

Posted on 2011-03-11
3
Medium Priority
?
326 Views
Last Modified: 2012-05-11
Grrr... All I wanted to do was to implement a three-level dropdown menu. All I could find with a decent (and successful) example included was this one:

http://htmldog.com/articles/suckerfish/dropdowns/

Trouble is, I need different widths for the top-level links -- and with Son of Suckerfish, it seems like the links are all the same size by design.

So... can an expert either show me what I need to do, here, OR point me to a better three-level dropdown menu? I'm open to something that's heavier on the javascript side, but the only one I found didn't have three levels...

Thanks folks! Points for speed, as always... I hope it's not 500 points worth of difficulty!
0
Comment
Question by:amateur6
[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
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
McNetic earned 2000 total points
ID: 35112502
The width of the elements is controlled by css. Look at this example.

Now, remove the width styles from the #nav a and #nav li sections (sourcecode below), and the top-level elements adapt their width to their content.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Perciformes!</title>

<style type="text/css">

body {
	font: 78%/1.5 arial, helvetica, serif;
	background: white url(bgbaba.gif);
	text-align: center;
	padding: 0;
	margin: 2em;
}

#container {
	width: 36em;
	background: #F4ECD9;
	text-align: left;
	border: 1px solid #eda;
	margin: 0 auto;
}

p {
	background: url(remorabg.gif) center no-repeat;
	margin: 1em 2em;
}

p#smurf {
	background: transparent;
	font-style: italic;
	text-align: center;
	font-weight: bold;
	color: #7C6240;
}

#smurf strong {
	font-size: 1.2em;
	color: black;
}

h1 {
	height: 108px;
	background: url(perciformes3.gif) bottom center no-repeat;
	text-indent: -999em;
	margin: 1em 0 0 0;
}

#nav, #nav ul {
	float: left;
	width: 36em;
	list-style: none;
	line-height: 1;
	background: white;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}

#nav a {
	display: block;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #eda;
}

#content {
	clear: left;
}

#content a {
	color: #7C6240;
}

#content a:hover {
	text-decoration: none;
}

#scaffolding {
	height: 70px;
	background: white url(/images/header_bg.gif) no-repeat;
	border: solid #eda;
	border-width: 1px 0 0 0;
	margin: 1em 0 0 0;
}

#scaffolding a {
	text-decoration: none;
	text-indent: -999em;
	display: block;
	height: 70px;
	background: url(/images/hdlogo_flip2.gif) no-repeat;
	background-position: 181px 0;
}

#scaffolding a:hover {
	background-position: 181px -70px;
}

</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="container">
<h1>PERCIFORMES!</h1>
<p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#" class="daddy">Remoras</a>
				<ul>
					<li><a href="#" class="daddy">Echeneis</a>
						<ul>
							<li><a href="#">Sharksucker</a></li>
							<li><a href="#">Whitefin Sharksucker</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">Phtheirichthys</a>
						<ul>
							<li><a href="#">Slender Suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">Remora</a>
						<ul>
							<li><a href="#">Whalesucker</a></li>
							<li><a href="#">Spearfish remora</a></li>
							<li><a href="#">Marlinsucker</a></li>
							<li><a href="#">Remora</a></li>
							<li><a href="#">Ceylonese remora</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">Remorina</a>
						<ul>
							<li><a href="#">White suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">Rhombochirus</a>
						<ul>
							<li><a href="#">R. osteochir</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#" class="daddy">Tilefishes</a>
				<ul>
					<li><a href="#">Caulolatilus</a></li>
					<li><a href="#">Lopholatilus</a></li>
					<li><a href="#">Malacanthus</a></li>
				</ul>
			</li>
			<li><a href="#" class="daddy">Bluefishes</a>
				<ul>
					<li><a href="#">Pomatomus</a></li>
					<li><a href="#">Scombrops</a></li>
					<li><a href="#">Sphyraenops</a></li>
				</ul>
			</li>
			<li><a href="#" class="daddy">Tigerfishes</a>
				<ul>
					<li><a href="#">Amniataba</a></li>
					<li><a href="#">Bidyanus</a></li>
					<li><a href="#">Hannia</a></li>
					<li><a href="#">Hephaestus</a></li>
					<li><a href="#">Lagusia</a></li>
					<li><a href="#">Leiopotherapon</a></li>
					<li><a href="#">Mesopristes</a></li>
					<li><a href="#">Pelates</a></li>
					<li><a href="#">Pelsartia</a></li>
					<li><a href="#">Pingalla</a></li>
					<li><a href="#">Rhyncopelates</a></li>
					<li><a href="#">Scortum</a></li>
					<li><a href="#">Syncomistes</a></li>
					<li><a href="#">Terapon</a></li>
				</ul>
			</li>

		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#" class="daddy">Climbing perches</a>
				<ul>
					<li><a href="#">Anabas</a></li>
					<li><a href="#">Ctenopoma</a></li>
				</ul>
			</li>
			<li><a href="#" class="daddy">Labyrinthfishes</a>
				<ul>
					<li><a href="#">Belontia</a></li>
					<li><a href="#">Betta</a></li>
					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Sphaerichthys</a></li>
					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>

	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>
			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>
			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>

</ul>

<div id="content">
	<p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
	<p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="http://www.danwebb.net/">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish/dropdowns/">article in HTML Dog</a>. To find out more about perch-like fishes, <a href="http://www.google.com/search?q=perciformes">give Google a try</a>.</p>
	<p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="http://www.alistapart.com/articles/elastic/">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
	<p id="scaffolding"><a href="http://www.htmldog.com/" title="Go t'HTML Dog">Go on. Visit HTML Dog</a></p>
</div>

</div>

</body>

</html>

Open in new window

0
 
LVL 1

Author Comment

by:amateur6
ID: 35112635
Okay, I should say that I knew WHERE it was being controlled, but I wanted to know if I could override that on an individual basis -- specifically because I was scared by the comment in the css that said "/* width needed or else Opera goes nuts */"

But looking at your example (at http://sullivanandco.com/test/test-menu.html), Opera doesn't seem to have any issues with it. Maybe that comment was related to a previous version.

Thanks for the quick response, McNetic! Let me just play around with this for a few minutes...
0
 
LVL 1

Author Closing Comment

by:amateur6
ID: 35113421
Took some fooling around, but I'm starting to get it. Thanks!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

771 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