CSS & Javascript Menu [Archive]

View Full Version : CSS & Javascript Menu

Forsaken_One

04-28-2006, 10:32 PM

Well, this works in Internet Explorer, but not in Firefox!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Esoteric Art</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: #000033 no-repeat 6000px 6000px;
padding: 10em;
margin: 0;
}

#content {
width: 34em;
background-color: #000033;
padding: 1em 0;
border: 6px double #ffffff;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 32em;
}

a {
text-decoration: none;
}

a:link {
color: #FFFFFF;
}

a:visited {
color: #D4D0C8;
}

a:active {
color: #0000FF;
}

a:hover {
text-decoration: color: #ffffff;
}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav a {
font-weight: bold;
color: FFFFFF;
}

#nav a {
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: normal;
color: #ffffff;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #FF6600;
text-decoration: color: #FF6600;
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: transparent;
border: 1px solid #ffffff;
border-width: 1px 0;
}

li#first {
border-left-width: 1em;
}

li#last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: #000033 bottom left no-repeat;
padding: 0.2em 0 .2em 0;
border-right: solid 1px #ffffff;
border-left: solid 1px #ffffff;
border-bottom: solid 1px #ffffff;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: #000033;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}

hr {
display: none;
}

p {
clear: left;
background: color: #00FF00 center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}

p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #00ff00;
padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
display: block;
border: 1px solid #000033;
}

</style>

<script type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

</script>

</head>

<body>

<body>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<ul>
<li><a href="aboutartists.html">Artists</a></li>
<li><a href="aboutsite.html">Site</a></li>
</ul>
<li><a href="artwork.html">Artwork</a></li>
<ul>
<li><a href="artists_art.html">By Artist</a></li>
<li><a href="theme_art.html">By Theme</a></li>
</ul>
<li><a href="literature.html">Literature</a></li>
<ul>
<li><a href="author_lit.html">By Author</a></li>
<li><a href="theme_lit.html"> By Theme</a></li>
</ul>
<li><a href="links.html">Links</a></li>
<ul>
<li><a href="affiliates.html">Affiliates</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contacts.html"> Contacts</a></li>
</ul>
</ul>
</body>
</html>

Little help?

www.tmcc.kupatrix.org

Markpyro

04-29-2006, 6:40 PM

Oddly for me, It doesnt work in either >.> (well, in firefox, at least some words appear). What version of IE are you using?

Forsaken_One

04-29-2006, 7:36 PM

The latest I believe.

I have that extension you can use with firefox.

I believe it is IE Tab.

Markpyro

04-29-2006, 8:16 PM

Yea, I have IE tab too. It doesnt work with it >.>

Modred

04-29-2006, 8:46 PM

It works in my IE tab, and I found your problem. Well, first, some of your CSS is invalid, but that's not the problem. I fixed that too (if it changed a color where you didn't want, you can easily fix that).

As a design consideration, you might want to conditionally use certain styles for your menu based on the availability of javascript. For example, have all of your normal style declarations in the regular style tag, and then within your javascript function write the style information for the items manipulated by javascript. Then in a noscript tag, write alternate style information for browsers with javascript disabled. Just a thought.

You have it set so that UL within LI does not display initially. Well, none of your UL tags are inside LI tags. I'm not sure why my IE displayed that properly, as the tags weren't nested the way your CSS looked for them to be. This version works in both (and conforms to the XHTML 1.0 Strict DTD, which your original did not):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Esoteric Art</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head>

<body>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="aboutartists.html">Artists</a></li>
<li><a href="aboutsite.html">Site</a></li>
</ul>
</li>
<li><a href="artwork.html">Artwork</a>
<ul>
<li><a href="artists_art.html">By Artist</a></li>
<li><a href="theme_art.html">By Theme</a></li>
</ul>
</li>
<li><a href="literature.html">Literature</a>
<ul>
<li><a href="author_lit.html">By Author</a></li>
<li><a href="theme_lit.html"> By Theme</a></li>
</ul>
</li>
<li><a href="links.html">Links</a>
<ul>
<li><a href="affiliates.html">Affiliates</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contacts.html"> Contacts</a></li>
</ul>
</li>
</ul>
</body>
</html>

See it here (http://people.smu.edu/jrobinet/menu.html).

EDIT: Ack, something broke. It worked locally. I'll see what it is. This is odd. I'm looking at the same file, one on the server and one locally on my computer. It works in Fx locally but not on the server.

EDITx2: Apparently Fx has a problem with the replace function. But I found a workaround. Code updated.

Forsaken_One

04-30-2006, 12:47 AM

Wow, thanks a lot.

Would you care to ellaborate a little more?

Mainly because I kind of get what you are saying, but I am coming up just a little bit short.

Thanks for the help!

Modred

04-30-2006, 2:41 AM

Here's exactly what your problem was. In your code, you had the following:

<li><a href="about.html">About</a></li>
<ul>
<li><a href="aboutartists.html">Artists</a></li>
<li><a href="aboutsite.html">Site</a></li>
</ul>

Your LI tag only encompasses the link, not the UL. The fix is simple, you simply move the closing tag of the first LI to after closing the UL, like so:

<li><a href="about.html">About</a>
<ul>
<li><a href="aboutartists.html">Artists</a></li>
<li><a href="aboutsite.html">Site</a></li>
</ul>
</li>

That fixes the problem about the displaying. However, after I uploaded the file to a remote server, the call to this.className.replace(" over"," ") was not executing properly in Fx, so the boxes never hid when you removed your mouse. That was fixed by changing it to this.className = " ".

For your CSS, you had a couple of properties like
text-decoration: color: ff3300;

The problem with the first part was that you had two attributes in the same line without defining one. In addition, you had a few color attributes where you left off the # symbol before the hex code. CSS like the above was changed to:

text-decoration: none;
color: #ff3300;

As far as making your document well-formed and valid XHTML, it was relatively easy. You opened the body tag twice, so I just had to delete one, and also space out the expressions in your for loop.

Forsaken_One

04-30-2006, 2:45 AM

You know what, I just figured it out. Thanks to you

How does this look?

I would link you, but for some reason I do not have access to my FTP thing on Neo's site...

Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<head>
<title>Esoteric Art</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: #000033 no-repeat 6000px 6000px;
padding: 9.25em;
margin: 0;
}

#content {
width: 34em;
background-color: #000033;
padding: 1em 0;
border: 6px double #ffffff;
margin: auto;
width: 32em;
}
html>body #content {
width: 32em;
}

a {
text-decoration: none;
}

a:link {
color: #FFFFFF;
}

a:visited {
color: #D4D0C8;
}

a:active {
color: #0000FF;
}

a:hover {
text-decoration: none;
color: #ffffff;
}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav a {
font-weight: bold;
color: FFFFFF;
}

#nav a {
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: normal;
color: #ffffff;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #FF6600;
text-decoration: none;
color: #FF6600;
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: 9.35em;
text-align: center;
cursor: default;
background-color: transparent;
border-width: 1px 0;
}

li#first {
border-left-width: 1em;
}

li#last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: #transparent bottom left no-repeat;
padding: 0.2em 0 .2em 0;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}

hr {
display: none;
}

p {
clear: left;
background: #00FF00 center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}

p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #00ff00;
padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
display: block;
border: 1px solid #000033;
}
</style>

<style type="text/css">
body {background-color:000033; background-image:none;}

.menu_bg {
background-color:black;
background-image:url(http://i35.photobucket.com/albums/d153/JFGoforth/My%20Art/esotericartsbannercopysadf.jpg);
border:1px solid; border-color:#000033;
width:750px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:0px; text-align:center;
visibility:visible;
border-left: #999999 solid 1px;
border-right: #999999 solid 1px;
border-top: #999999 solid 1px;
}

.menu_bar {
background-color:transparent;
width:750px; height:125px; overflow:auto;
position:absolute; z-index:2; left:504px; top:0px;
margin-left:-313px; margin-top:158px; text-align:center;
visibility:visible;
}

.news {
background-color:black;
border:1px solid; border-color:#999999;
width:750px; height:850px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:260px; text-align:center;
visibility:visible;
padding-bottom:inherit;
}

.copyright {
background-color:fff;
border:0px solid; border-color:#999999;
width:750px; height:20px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:1235px; text-align:center;
visibility:visible;
}
</style>

<script type="text/javascript">
startList = function() {
navRoot = document.getElementById("nav");
for (i=0 ; i<navRoot.childNodes.length ; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className = "over";
}
node.onmouseout=function()
{
this.className=this.className = " ";
}
}
}
}
window.onload=startList;
</script>

</head>

<body>
<div class="menu_bg">
<font color="#000033">.</font>
</div>
<div class="menu_bar">
<ul id="nav">
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/index.html">Home</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/artwork.html">Artwork</a>
<ul>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/artists_art.html">By Artist</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/theme_art.html">By Theme</a></li>
</ul>
</li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/literature.html">Literature</a>
<ul>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/author_lit.html">By Author</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/theme_lit.html"> By Theme</a></li>
</ul>
</li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/about.html">About</a>
<ul>
<br />
<li><a href= "file:///C|/Documents and Settings/Owner/My Documents/aboutartists.html">Artists</a></li>
<br />
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/aboutsite.html">Site</a></li>
</ul>
</li>

<li><a href="file:///C|/Documents and Settings/Owner/My Documents/links.html">Links</a>
<ul>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/affiliates.html">Affiliates</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/tutorials.html">Tutorials</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/resources.html">Resources</a></li>
<li><a href="file:///C|/Documents and Settings/Owner/My Documents/contacts.html"> Contacts</a></li>
</ul>
</li>
</ul>
</div>

<div class="news">
Welocome to Esoteric Arts, enjoy your stay.
</div>

<div class="copyright">
<font size="-1"><font color="#666666">Copyright © Jake Goforth 2006</font></font>
</div>
</body>
</html>