Learn how to a build a cloud-first strategyRegister Now

x
?
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
?
335 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
  • 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

810 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