|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 5th, 2008, 09:58 AM
|
|||
|
|||
|
Suckerfish menu modification
Hi,
I am about to build a new web site for the company I work for. It's been decided that the main navigation menu should be a one-level horizontal drop-down menu. The site will be centered and have a fixed width (960px). Problem 1, distribution: The first problem was to get the menu “buttons” to be even horizontally distributed over the full width. After a lot of testing I found it’s not possible without setting fixed widths, and that’s not an option because the site will be translated into at least 10 different languages (and then you would have to change the width for every language). My second thought was to use CSS display:table; (table-row and table-cell), but that’s no good either because it does not work in Internet Explorer (6 and 7) and we don't want to deal with dual markup. I can’t say I like it but my solution is basically to use a one-row <table> with the actual drop-down as a <ul>. Thoughts, better solutions and/or other ideas are appreciated? Problem 2, align right: Ok, so I have the markup and the modified Suckerfish CSS and scripts (see below) and it works perfectly. Now, I need help with getting the last drop-down (furthest to the right) to align right, not left as it does now. I tried to play around with right:auto;, but that gives no effect. Can anyone help me with this? This is a working example, just paste it into a html-file and run it (it will need some CSS modifications to look good in IE 6). Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" dir="ltr">
<head>
<title>Suckerfish Menu</title>
<style type="text/css">
/*********************************************/
body {
margin:0;
font-family:Sans-Serif;
font-size:0.69em;
line-height:1.45em;
text-align:center;
}
.site {
width:960px;
margin:0 auto;
text-align:left;
}
/**************** MENU STYLES ****************/
.siteMainMenu {
margin:0;
width:100%;
padding:0;
line-height:1;
}
.siteMainMenu a {
background:#333 none;
color:#fff;
display:block;
margin-top:1px;
padding:5px 10px;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
text-align:center;
white-space:nowrap;
}
.siteMainMenu a:hover {
background:#999 none;
}
.siteMainMenu ul {
position:absolute;
margin:0;
padding:0;
top:auto;
list-style-type:none;
}
.siteMainMenu ul a {
background:#666 none;
text-align:left;
}
.siteMainMenu ul a:hover {
background:#999 none;
}
.siteMainMenu td.left ul,
.siteMainMenu td.mid ul {
left:-999em;
}
.siteMainMenu td.right ul {
right:999em;
}
.siteMainMenu td.left:hover ul,
.siteMainMenu td.left.over ul,
.siteMainMenu td.mid:hover ul,
.siteMainMenu td.mid.over ul {
left:auto;
}
.siteMainMenu td.right:hover ul,
.siteMainMenu td.right.over ul {
right:auto;
}
/*********************************************/
</style>
<script type="text/javascript">
//<![CDATA[
/**************** addEvent SCRIPTS ****************/
function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
/*********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
/**************** Suckerfish SCRIPTS ****************/
function findAndApplySuckerfishHover () {
var suckerfishMenus = getElementsByClassName('suckerfish');
for (var i = 0, j = suckerfishMenus.length; i < j; i++) {
suckerfishHover(suckerfishMenus[i]);
}
}
function getElementsByClassName (cssClass) {
var elementsToSearch = document.getElementsByTagName('*');
var elementsThatMatch = new Array();
var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
for (var i = 0, j = elementsToSearch.length; i < j; i++) {
if (regexp.test(elementsToSearch[i].className)) {
elementsThatMatch.push(elementsToSearch[i]);
}
}
return elementsThatMatch;
}
function suckerfishHover (element) {
var cssClass = 'over';
var elements = element.getElementsByTagName('TD');
var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
for (var i = 0, j = elements.length; i < j; i++) {
elements[i].onmouseover = function() {
if (!regexp.test(this.className)) {
this.className += ' ' + cssClass;
}
}
elements[i].onmouseout = function() {
this.className = this.className.replace(regexp, '');
}
}
}
/*********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
/*********************************************/
addEvent(window, 'load', function() {
findAndApplySuckerfishHover();
});
/*********************************************/
//]]>
</script>
</head>
<body>
<form method="post" action="" class="site">
<div class="siteHeadingBottom">
<table class="siteMainMenu suckerfish">
<tr>
<td class="left"><a href="#">Item #1</a>
<ul>
<li><a href="#">Item #1:1</a></li>
<li><a href="#">Item #1:2</a></li>
<li><a href="#">Item #1:3</a></li>
</ul>
</td>
<td class="mid"><a href="#">Item #2</a>
<ul>
<li><a href="#">Item #2:1</a></li>
<li><a href="#">Item #2:2</a></li>
<li><a href="#">Item #2:3</a></li>
<li><a href="#">Item #2:4</a></li>
<li><a href="#">Item #2:5</a></li>
<li><a href="#">Item #2:6</a></li>
</ul>
</td>
<td class="mid"><a href="#">Item #3</a></td>
<td class="mid"><a href="#">Item #4</a>
<ul>
<li><a href="#">Item #4:1</a></li>
<li><a href="#">Item #4:2</a></li>
<li><a href="#">Item #4:3</a></li>
<li><a href="#">Item #4:4</a></li>
</ul>
</td>
<td class="mid"><a href="#">Item #5</a>
<ul>
<li><a href="#">Item #5:1</a></li>
</ul>
</td>
<td class="mid"><a href="#">Item #6</a>
<ul>
<li><a href="#">Item #6:1</a></li>
<li><a href="#">Item #6:2</a></li>
<li><a href="#">Item #6:3</a></li>
<li><a href="#">Item #6:4</a></li>
<li><a href="#">Item #6:5</a></li>
</ul>
</td>
<td class="right"><a href="#">Item #7</a>
<ul>
<li><a href="#">Item #7:1</a></li>
<li><a href="#">Item #7:2</a></li>
<li><a href="#">Item #7:3</a></li>
<li><a href="#">Item #7:4</a></li>
<li><a href="#">Item #7:5</a></li>
<li><a href="#">Item #7:6</a></li>
<li><a href="#">Item #7:7</a></li>
</ul>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
|
#2
May 6th, 2008, 04:10 AM
|
|||
|
|||
|
Solution
Hi again,
I found a solution to my problems with the help of a good night sleep and some colleges. There was a numerous problems I had to fix in order to get a good result. Move class declarations I had to move the class attribute on the TDs to the ULs. Fix the right align problem Since I have a fixed width on the site itself, I just had do add: Code:
right: 50%; margin-right:-480px; /* half the site width */ instead of: Code:
right: auto; Weird IE 6 bottom margin I had add a border bottom declaration in order get rid of a weird spacing between the LIs in IE 6. Code:
text-transform:uppercase; white-space:nowrap; Weird IE 6 right margin When I had the CSS below, IE 6 freaked out on the right hand margin of the As. I have no clue why ... Code:
text-transform:uppercase; white-space:nowrap; Opera and fixed width As stated on the Suckerfish web site you might have to add a fixed width on the drop-downs otherwise "Opera goes nuts" ... Code:
.siteMainMenu li {width: 10em;}
Here is a working solution (it's not 100% finished, but you get the idea) Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" dir="ltr">
<head>
<title>Suckerfish Menu</title>
<style type="text/css">
/*********************************************/
body {
margin:0;
font-family:Sans-Serif;
font-size:0.69em;
line-height:1.45em;
text-align:center;
}
table {
border-collapse:collapse;
}
.site {
width:960px;
margin:0 auto;
text-align:left;
}
/**************** MENU STYLES ****************/
.siteMainMenu {
margin:0 auto;
width:100%;
padding:0;
text-align:left;
line-height:1;
}
.siteMainMenu td {
margin:0;
padding:0;
}
.siteMainMenu ul {
padding:0;
margin:0;
list-style:none;
line-height:1;
}
.siteMainMenu a {
display:block;
padding:5px 10px;
font-weight:bold;
text-decoration:none;
}
.siteMainMenu td a {
text-align:center;
background:#ccc none;
}
.siteMainMenu td a:hover {
background:#f00 none;
}
.siteMainMenu td ul a {
text-align:left;
}
.siteMainMenu ul a:hover {
background:#f00 none;
}
/* second-level */
.siteMainMenu td ul {
position: absolute;
background: orange;
width: 10em;
}
/* using left instead of display to hide menus because display: none isn't read by screen readers */
.siteMainMenu td ul.left,
.siteMainMenu td ul.mid {
left:-999em;
}
.siteMainMenu td ul.right {
right:999em;
}
/* lists nested under hovered list items */
.siteMainMenu td:hover ul.left,
.siteMainMenu td.over ul.left,
.siteMainMenu td:hover ul.mid,
.siteMainMenu td.over ul.mid {
left: auto;
margin-right:0;
}
.siteMainMenu td:hover ul.right,
.siteMainMenu td.over ul.right {
right: 50%;
margin-right:-480px;
}
/***** FOR IE 6 ONLY *****/
.siteMainMenu li {
border-width:0 0 1px 0;
border-style:solid;
border-color:#000;
}
/*********************************************/
</style>
<script type="text/javascript">
//<![CDATA[
/**************** addEvent SCRIPTS ****************/
function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
/*********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
/**************** Suckerfish SCRIPTS ****************/
function findAndApplySuckerfishHover () {
var suckerfishMenus = getElementsByClassName('suckerfish');
for (var i = 0, j = suckerfishMenus.length; i < j; i++) {
suckerfishHover(suckerfishMenus[i]);
}
}
function getElementsByClassName (cssClass) {
var elementsToSearch = document.getElementsByTagName('*');
var elementsThatMatch = new Array();
var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
for (var i = 0, j = elementsToSearch.length; i < j; i++) {
if (regexp.test(elementsToSearch[i].className)) {
elementsThatMatch.push(elementsToSearch[i]);
}
}
return elementsThatMatch;
}
function suckerfishHover (element) {
var cssClass = 'over';
var elements = element.getElementsByTagName('TD');
var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
for (var i = 0, j = elements.length; i < j; i++) {
elements[i].onmouseover = function() {
if (!regexp.test(this.className)) {
this.className += ' ' + cssClass;
}
}
elements[i].onmouseout = function() {
this.className = this.className.replace(regexp, '');
}
}
}
/*********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
/*********************************************/
addEvent(window, 'load', function() {
findAndApplySuckerfishHover();
});
/*********************************************/
//]]>
</script>
</head>
<body>
<form method="post" action="" class="site">
<div class="siteHeadingBottom">
<table class="siteMainMenu suckerfish">
<tr>
<td><a href="#">Item #1</a>
<ul class="left">
<li><a href="#">Item #1:1</a></li>
<li><a href="#">Item #1:2</a></li>
<li><a href="#">Item #1:3</a></li>
</ul>
</td>
<td><a href="#">Item #2</a>
<ul class="mid">
<li><a href="#">Item #2:1</a></li>
<li><a href="#">Item #2:2</a></li>
<li><a href="#">Item #2:3</a></li>
<li><a href="#">Item #2:4</a></li>
<li><a href="#">Item #2:5</a></li>
<li><a href="#">Item #2:6</a></li>
</ul>
</td>
<td><a href="#">Item #3</a></td>
<td><a href="#">Item #4</a>
<ul class="mid">
<li><a href="#">Item #4:1</a></li>
<li><a href="#">Item #4:2</a></li>
<li><a href="#">Item #4:3</a></li>
<li><a href="#">Item #4:4</a></li>
</ul>
</td>
<td><a href="#">Item #5</a>
<ul class="mid">
<li><a href="#">Item #5:1</a></li>
</ul>
</td>
<td><a href="#">Item #6</a>
<ul class="mid">
<li><a href="#">Item #6:1</a></li>
<li><a href="#">Item #6:2</a></li>
<li><a href="#">Item #6:3</a></li>
<li><a href="#">Item #6:4</a></li>
<li><a href="#">Item #6:5</a></li>
</ul>
</td>
<td><a href="#">Item #7</a>
<ul class="right">
<li><a href="#">Item #7:1</a></li>
<li><a href="#">Item #7:2</a></li>
<li><a href="#">Item #7:3</a></li>
<li><a href="#">Item #7:4</a></li>
<li><a href="#">Item #7:5</a></li>
<li><a href="#">Item #7:6</a></li>
<li><a href="#">Item #7:7</a></li>
</ul>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Suckerfish menu modification |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
