Please someone help me with a menu [Archive]

Click to See Complete Forum and Search --> : Please someone help me with a menu

jubcheng

08-26-2006, 11:51 AM

Hi Everybody.

I got a menu template from here:

http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm

I'm trying to get the 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:
<!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>
CSS:
* {
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;
}

Rossario123

08-26-2006, 03:21 PM

so you wan't the popup portion correct?

but no javascript?

just all css flyout menu right?

jubcheng

08-26-2006, 11:59 PM

Hi Rosario.

Thanks for yor reply.
Yes that would be nice.
I have this one with javascript working now but I would like it better without javascript.
Is there a way?
Cheng

Rossario123

08-27-2006, 10:52 AM

http://www.cssplay.co.uk/menus/flyout2.html

jubcheng

08-27-2006, 11:25 AM

Hi Rosario123

This is nice thank you.
But I dont understand from the link how to do it as I'm very new to all this.
There is no CSS or HTML template or something like this.
Could you please give me a hand here.
Thanks again, I realy appreciated.

Cheng

Rossario123

08-27-2006, 11:36 AM

i.e 6 requires conditional comments to be used in order for it to work. So when you see
</a>

that will be ignored by i.e 6 but not other browsers. That just states the the hyperlink tag will be ending and the li tag will do the :hover property.

i.e 6 requires the whole list to be inside a hyperlink so later on you will see

which only i.e 6 will read. If there is any confusin just ask for help

<style type="text/css">
.menu {
position:relative;
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}

/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
background:#d4d8bd;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
.menu a:hover{
color:#fff;
background:#949e7c;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>

<div class="menu">
<ul>
<li><a href="../index.html">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>
<li><a href="#nogo">Item 3 »</a>
<table><tr><td>
<ul>

<li><a href="../index.html">Item 3a</a></li>
<li><a href="#nogo">Item 3b »</a>
<table><tr><td>
<ul>
<li><a href="../index.html">Item 3bi</a></li>
<li><a href="#nogo">Item 3bii</a></li>
<li><a href="#nogo">Item 3biii »</a>

<table><tr><td>
<ul>
<li><a href="#nogo">Item 3biii-1</a></li>
<li><a href="#nogo">Item 3biii-2</a></li>
<li><a href="#nogo">Item 3biii-3</a></li>
<li><a href="#nogo">Item 3biii-4</a></li>
</ul>

</td></tr></table>

</li>
</ul>
</td></tr></table>

</li>
<li><a href="#nogo">Item 3c</a></li>

</ul>
</td></tr></table> 
</li>
<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>

</ul>
</div>

jubcheng

08-27-2006, 11:40 AM

.......alright, it seems like I have to get it out of the source code.
But I tried and this is to complicated for me.
This is for some people who advanced in this area.
I'm not a webdesigner.
I like it very much though but have to pass as I can't figure it out just from the source code.
It would be nice to have an external CSS file and HTML code for lets say three links.
one with submenus and one without.
Because I started deleting stuff that I don't need and then it wont work anymore.
If by chance you come past a template like this please let me know.
Thanks again very much.......Cheng.......

Rossario123

08-27-2006, 11:44 AM

all i can tell you is trial and error

take the code i provided because i broke it down from the source code

and play around with it.

jubcheng

08-27-2006, 11:46 AM

Hi Rosario123

Thank you very much.
This looks much better to me.
Where I live it's very late now.
I'll get to it tomorrow.
I realy appreciate your help.

Thanks again.

Cheng

PS
I'll let you know later on if I could manage.