PDA

View Full Version : CSS Menus



MaxOTBabe
07-01-2006, 02:04 AM
HI,

I'm new to CSS but learn quickly. I like the menu here and would like to implement it into me site but in white and grey. Can someone please tell me tep-by-step how I do the menu. How I save the code? I note some of my style sheets dont look like text files. Do they have to be saved as a certain type of file?
I cut and pasted the css text and saved into my site folder with the gif's. I pasted the html into the menu on my web page but when I open up the web page, I just get written links and the gifs dont show. Do the gif's have to be altered in anyway as they are small at present.

Thanks

Max

jscheuer1
07-01-2006, 05:13 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Follow the instructions on the demo page. If there is something, some term you don't understand, ask a specific question about it. I don't think anyone can help much more without knowing which code you are working with. Images don't need to be changed unless you don't like the way they look. Css files are ordinary text files and should be saved with the .css extension, ex:

mystyles.css

MaxOTBabe
07-03-2006, 03:31 AM
Sorry. I thought I had included the link. It's the Glossy Vertical Menu here:

http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/

and as such there arn't any instructions at all about what to do with the code. 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.
Thats what I wished to learn. How to implement the code into menu table on my web site and if you could point me to a tutorial, I'd be greatful.

Cheers,
Max

jscheuer1
07-03-2006, 06:24 AM
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):


<!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.