[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register 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
?
330 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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?
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

650 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