Originally Posted by
MaxOTBabe
You just give the Css code and the Html code and no instructions ass to how they should be implemented or how I should customise the links in the code.
I didn't give any code. See in my sig (bottom right) where it says:
NOT affiliated with Dynamic Drive, yet . . .
Anyways, a typical installation would look like so (entire code for an HTML page):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu li a{
background: white url(media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(media/glossyback2.gif);
}
</style>
</head>
<body>
<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
<div style="margin-top: 1em; font-size: 90%">Credit: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS library</a></div>
</body>
</html>
The above assumes it is in a directory that has a subdirectory called 'media' where the images[1] are located. The links, if you look at them are ordinary HTML links and can be modified in the same way you would modify any ordinary HTML links. The structure of the menu is constructed using an unordered list (<ul>) and its list items (<li>'s) and the css. If you want the menu in a table, put the entire green portion of the above code in a table cell (<td>) in a table. The css (in the <style></style> section) can be modified if desired to get things to line up and to look the way you want. Any valid css may be used if it suits your purposes. Consult your favorite css resource or see:
http://www.blooberry.com/indexdot/css/propindex/all.htm
1 The images are - glossyback.gif and glossyback2.gif - which you need to download by right clicking on them on the demo page and choosing 'save as'. You can make your own or modify these once you download them.
CSS Menus
Reply With Quote
Bookmarks