...

View Full Version : Simple one level menu "tweeks"possible?



jmrker
11-20-2012, 06:04 PM
The following script creates a simple working menu, but I would like to "tweek" it a bit.

Two things I have tried (both commented out in red in the script below)

1. Current the sub-menu aligns with the left margin of the main <ul> element.
Is is possible to use the "left" position of the top row <li> elements to set the <div> element positions to align with the top row?
Currently, I cannot figure out how to use the 'this' (info) attribute to get the parent's left position.

2. Currently the menu changes the background color with the mouse hover. This is fine.
Is it possible to set the background color of the last item selected while retaining the hover effect color?
It should return to the original background color if a different item is selected (or deselected).
In other words, the top row item would retain the background selected color only while the sub-menu is being displayed.

I think the problem is in my understanding of the 'this' attribute passed to the function.
Both of the above tweeks are not absolutely necessary, but I would like to add one or both just for the purpose of aesthetics. :)



<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Simple Menu </title>

<style type="text/css">
.hide { display : none; }
.show { display : block; border:1px solid black; width:200px; }

#menu li { list-style-type:none; display:inline; cursor:pointer; }
#menu li:hover { background-color:orange; }

#menu div li { list-style-type:none; display: block; }
#menu div li:hover { background-color:orange; }

#Forums div { display:none; }
#NSU div { display:none; }
#Email div { display:none; }
</style>

</head>
<body>
<ul id="menu" style="position:absolute; left:200px">
<li onclick="showHide('Forums',this)">Forums</li>
<li onclick="showHide('NSU',this)">NSU</li>
<li onclick="showHide('Email',this)">Email</li>

<div id="Forums" class="hide">
<li> <a href="http://www.webdeveloper.com">Webdeveloper</a></li>
<li> <a href="http://www.codingforums.com">Coding Forums</a></li>
<li> <a href="http://www.dreamincode.net">Dream-In-Code</a></li>
</div>
<div id="NSU" class="hide">
<li> University </li>
<li> HPD </li>
<li> Optometry </li>
<li> Library </li>
</div>
<div id="Email" class="hide">
<li> Exchange </li>
<li> Gmail </li>
<li> Bellsouth </li>
</div>
</ul>

<script type="text/javascript">
function showHide(IDS,info) {
var sel = document.getElementById('menu').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].className = 'hide'; }
}
sel = document.getElementById(IDS);
sel.className = (sel.className == 'hide') ? 'show' : 'hide';


// Tweek #1:
// I thought would be able to get 'left' value of 'this' (info) element to set the IDS position, but no go (???)
// var hpos = info.left; alert(hpos); // for testing purposes only
// sel.left= hpos+'px';

// also thought as Tweek #2 (again trying to use 'this' (info) element:
// following line does not "stick" background color as expected when top line item is clicked (???)
// if (sel.className == 'show') { info.style.backgroundColor='lightblue' }
// else { info.style.backgroundColor='white'; }
// alert(info.style.backgroundColor); // for testing purposes only


}
</script>
</body>
</html>

jmrker
11-21-2012, 04:41 AM
I believe I've come up with a solution for the 1st tweek. :thumbsup:
May not be the most optimal solution, so any comments or corrections are welcomed. :D



<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Simple Menu </title>

<style type="text/css">
.hide { display:none; }
.show { display:block; width:200px; border:1px solid black; }

.menuLI { display:block; float:left; width:50px; }

#menu li { list-style-type:none; cursor:pointer; }
#menu li:hover { background-color:orange; }

#menu div li { list-style-type:none; display:block; clear:both; }
#menu div li:hover { background-color:orange; }

#Forums div { display:none }
#NSU div { display:none; }
#Email div { display:none;}
</style>

</head>
<body>
<ul id="menu">
<li onclick="showHide('Forums',this,0)" class="menuLI">Forums</li>
<li onclick="showHide('NSU',this,1)" class="menuLI">NSU</li>
<li onclick="showHide('Email',this,2)" class="menuLI">Email</li>
<br style="clear:both" />

<div id="Forums" class="hide">
<li> <a href="http://www.webdeveloper.com">Webdeveloper</a></li>
<li> <a href="http://www.codingforums.com">Coding Forums</a></li>
<li> <a href="http://www.dreamincode.net">Dream-In-Code</a></li>
</div>
<div id="NSU" class="hide">
<li> University </li>
<li> HPD </li>
<li> Optometry </li>
<li> Library </li>
</div>
<div id="Email" class="hide">
<li> Exchange </li>
<li> Gmail </li>
<li> Bellsouth </li>
</div>
</ul>

<script type="text/javascript">
function showHide(IDS,info,wide) {
var sel = document.getElementById('menu').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].className = 'hide'; }
}
sel = document.getElementById(IDS);
sel.className = (sel.className == 'hide') ? 'show' : 'hide';

sel.style.marginLeft = (wide*50)+'px'; // needs to match width value of .menuLI in style section


// Tweek #1 could be improved if I could figure out how to return the 'width' of an element
// in this case, the width setting of the .menuLI class


// also thought as Tweek #2 (again trying to use 'this' [info] element):
// following line does not "stick" background color as expected when top line item is clicked (???)
// if (sel.className == 'show') { info.style.backgroundColor='lightblue' }
// else { info.style.backgroundColor='white'; }
// alert(info.style.backgroundColor); // for testing purposes only

}
</script>
</body>
</html>


Still looking into solution for the 2nd tweek.

Old Pedant
11-22-2012, 02:47 AM
Does this do what you are after?


<script type="text/javascript">
function showHide(IDS,curLI,wide) {
var sel = document.getElementById('menu').getElementsByTagName('div');
var lis = document.getElementById('menu').getElementsByTagName('li');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].className = 'hide'; }
lis[i].style.backgroundColor = "transparent";
}
sel = document.getElementById(IDS);
sel.style.marginLeft = (wide*50)+'px'; // needs to match width value of .menuLI in style section
if ( sel.className == "hide" )
{
sel.className = 'show';
curLI.style.backgroundColor = "orange";
} else {
sel.className = 'hide';
curLI.style.backgroundColor = "transparent";
}
}
</script>

jmrker
11-22-2012, 05:42 AM
Does this do what you are after?
...


Very much so. :thumbsup:
I was not aware of the 'transparent' attribute.
Pretty neat solution. :D

Old Pedant
11-22-2012, 08:02 AM
"transparent" is actually the default background color for most (all?? not sure) elements. You seldom see it explicitly used, but it is one of the standard colors (along with "black", "white", "blue", "red", "green", and a handful of others, though most browsers accept the extended set of color names that IE introduced).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum