Need some help with menu template
Hi Everybody.
I got this menu from the libary:
http://www.dynamicdrive.com/dynamici...nkvertical.htm
And I'm trying to get this javascript into an external javascript file and also the CSS style I want to have in an external file.
Please someone give me a hand here.
I assume there is no way around the javascript for a menu like this.
Or is there?
If possible I would like to use the links I have in here already and apply only the menu effect.
Thanks in advance.
Cheng
Here the CSS and HTML I need this menu for: (menu should be on the left)
HTML:
CSS:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>test</title>
<link href="/styles/st.css" media="screen" rel="stylesheet" />
<link href="styles/st.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top">
<h1 class="alt">Arbitrade</h1>
<p> </p>
</div>
<div id="leftnav">
<div id="menu">
<div id="boxleft"></div>
<a class="alt" href="#content"><strong>Skip to Content</strong></a>
<p> </p>
<ul><li><a href="what_is_arbitrage.html">what is arbitrage </a></li>
<li><a href="concept.html">concept</a></li>
<li><a href="marketsituation.html">market situation </a></li>
<li><a href="online_order.html">online order </a></li>
<li><a href="security.html">security </a></li>
<li><a href="arbitrage_examples.html">arbitrage examples </a></li>
<li><a href="special_offer.html">special offer </a></li>
<li><a href="signup.html">sign up</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="rightnav">
<div id="boxright"></div>
<p> </p>
<p align="center"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="content">
<div class="hovermenu">
<ul>
<li><a href="contact.html">contact</a></li>
<li><a href="imprint.html"> imprint </a></li>
<li><a href="terms.html">terms</a></li>
<li><a href="about_us.html">about us</a></li>
<li><a href="home_en.html">home</a></li>
</ul>
</div>
<h2>test</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus. </p>
<p align="justify">Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p>Copyright © - 2005 - 2006 Arbitade - All rights reserved. </p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-repeat: repeat-x;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: thick;
background-image: url(../images/bg3.jpg);
}
#container {
background-color: #FFFFFF;
width: 780px;
margin-left: auto;
margin-right: auto;
color: #000000;
margin-bottom: 2px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
background-position: center 165px;
background-repeat: no-repeat;
}
.alt {
display: none;
}
#top {
height: 120px;
text-align: left;
background-color: #FFFFFF;
color: #000000;
width: 100%;
background-position: center bottom;
background-attachment: fixed;
background-image: url(../images/top1.jpg);
}
.hovermenu {
width: 440px;
height: 20px;
background-color: #000092;
float: right;
}
.hovermenu ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
text-decoration: none;
color: #FFFFFF;
background-color: #000098;
width: 65px;
height: 20px;
line-height: 30px;
font-size: 10px;
font-family: Verdana;
float: right;
}
.hovermenu ul li a:hover{
font-weight: bolder;
color: #ECC113;
}
#top h1 {
padding: 0;
margin: 0;
visibility: hidden;
}
#leftnav {
width: 170px;
text-align: center;
background-color: #FFFFFF;
color: #000000;
float: left;
}
#rightnav {
float: right;
width: 170px;
background-color: #FFFFFF;
color: #000000;
text-align: center;
}
#boxright {
background-color: #000098;
height: 30px;
}
#boxleft {
background-color: #000098;
height: 30px;
}
#menu {
text-align: left;
text-indent: 10px;
background-color: #FFFFFF;
background-image: url(../images/Logo.gif);
background-repeat: no-repeat;
background-position: 30px 20em;
}
#menu ul {
color: #000066;
list-style-type: none;
width: 160px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0;
}
#menu li {
color: #000066;
padding: 1px;
}
#menu li a {
color: #000000;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
width: 165px;
height: 25px;
text-indent: 20px;
background-image: url(../images/bullet1.gif);
background-repeat: no-repeat;
background-position: 5px center;
display: block;
line-height: 1.75em;
}
#menu li a:hover {
background-color: #000098;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(../images/bullet2.gif);
background-repeat: no-repeat;
background-position: 5px center;
}
#content {
margin-left: 170px;
margin-right: 170px;
color: #000000;
}
#content h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000099;
text-align: left;
background-color: #FFFFFF;
background-position: top;
font-size: 1em;
line-height: 1.5em;
padding-left: 0.9em;
margin-top: 0.75em;
}
#content p {
color: #000000;
line-height: 1.1em;
font-size: 0.9em;
padding-right: 1em;
padding-left: 1em;
margin-top: 1em;
}
#footer {
color: #000000;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #000098;
background-color: #FFFFFF;
padding-top: 5px;
font-size: 0.75em;
text-align: right;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0;
}
CSS Codes
Reply With Quote
Originally Posted by Cheng
Bookmarks