Hi All,
Thanks in advance....
I saw this website www.spatec.com.sg... And saw the slidedown menu bars of "home" "about spatec", how to create this menu bar using which html item? The home if I dont click on it the menu bar wont drop down(i hope it is not java click mouseover function as I hope to use perl and html to achieve same thing, or can I embed java in perl or html?
Also, the main menu bar template index.html always is presented in the which menu item say under "home" menu we click submenu
"graduates" or "news", the main template in the background will be there always, which html or java function can do it? I am using perl, anyway to do it also?
Thanks,
Andrew
26 2841
It cannot be done with HTML, and it might be done with javascript, didn't look, but it can be done with CSS using the 'hover' property. I can't go into it now since I'm going out. Google for "CSS drop down menu".
Javascript is used to create the desired drop-down effect, however, it is poorly done. When viewed in IE7 and Safari the rest of the menu's drop-downs are hidden by the flash slideshows.
As drhowarddrfine suggested you could use CSS, and with a little Javascript it will even work in IE6-7! Here is a decent article on creating a "Suckerfish Dropdown". Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Thanks Sir/all,
I found the complete working code at search for " if you can’t get this to work for any reason, here is a working example for download:" at Create a multilevel Dropdown menu with CSS and improve it via jQuery | Kriesi.at - new media design.
a) Also, I pasted the code, how to move the drop down menu to centralized position in web page's centre?
b) how to make use of the main css template to interface with pages in the same website easily, as I have many sub html webpage to include in the website, but keep the main navigation drop down menu template
Thanks in advance,
Andrew
html code
======= -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="XHTML namespace">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title></title>
-
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
-
<script type='text/javascript' src='menu.js'></script>
-
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-
</head>
-
<body><ul id="nav">
-
<li><a href="http://127.0.0.1/preview.html">1 HTML</a></li>
-
<li><a href="#">2 CSS</a></li>
-
<li><a href="#">3 Javascript </a>
-
<ul>
-
<li><a href="#">3.1 jQuery</a>
-
<ul>
-
<li><a href="#">3.1.1 Download</a></li>
-
<li><a href="#">3.1.2 Tutorial</a></li>
-
</ul>
-
</li>
-
<li><a href="#">3.2 Mootools</a></li>
-
<li><a href="#">3.3 Prototype</a></li>
-
</ul>
-
</li>
-
</ul>
-
</body>
-
</html>
-
-
ccs code
======= -
body{font-size:0.85em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;li
-
ne-height:1.5em; }
-
#nav a{display:block;padding:0px 5px;border:1px solid
-
#333;color:#fff;text-decoration:none;background-color:#333;}
-
#nav a:hover{background-color:#fff;color:#333;}
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.5em;}
-
#nav li ul a{width:12em;height:auto;float:left;}
-
#nav ul ul{top:auto;}
-
#nav li ul ul {left:12em;margin:0px 0 0 10px;}
-
#nav li:hover ul ul, #nav li:hover ul ul ul,
-
#nav
-
li:hover ul ul ul ul{display:none;}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
-
-
Hi All,
I wanted to make the above ccs something like www.spatec.com.sg where the home, about spatec, trainer's profile, and remaining of the menu is centralized... kindly assist. Thanks...
I don't have time to look at it right now. The margin:0 auto; style may work (it depends on which elements you have used the float style on). I will try to help you as soon as possible. Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi Sir,
Thanks. It is basically working, I left with one problem and one query for below latest codes...
1) the drop down menu worked, but when i click on the item in sub menu, the wordings is overshadowed by the webpage's photo or words...
2) how to find detailed line by line explanation for css?
Thanks in advance...
Andrew -
body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:outside;position:relative
-
;line-height:1.6em; }
-
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
-
#fff;text-decoration:none;background-color:
-
#ff00ff;}
-
#nav a:hover{background-color:
-
#fff;color:
-
#333;}
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.8em;}
-
#nav li ul a{width:12em;height:auto;float:left;}
-
#nav ul ul{top:auto;}
-
#navbar li ul ul {left:12em;margin:0px 0 0 10px;}
-
#nav li:hover ul ul,
-
#nav li:hover ul ul ul,
-
#nav li:hover ul ul ul ul{display:block;}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
-
Once again I must apologize because I am in a hurry. Here's a quick solution for your centering problem:
Put your navigation menu in a division with an id, and add this CSS rule: - #wrapper {
-
width:217px;
-
margin:0 auto;
-
}
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="XHTML namespace">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title></title>
-
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
-
<script type='text/javascript' src='menu.js'></script>
-
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-
</head>
-
<body>
-
<div id="wrapper">
-
<ul id="nav">
-
<li><a href="http://127.0.0.1/preview.html">1 HTML</a></li>
-
<li><a href="#">2 CSS</a></li>
-
<li><a href="#">3 Javascript </a>
-
<ul>
-
<li><a href="#">3.1 jQuery</a>
-
<ul>
-
<li><a href="#">3.1.1 Download</a></li>
-
<li><a href="#">3.1.2 Tutorial</a></li>
-
</ul>
-
</li>
-
<li><a href="#">3.2 Mootools</a></li>
-
<li><a href="#">3.3 Prototype</a></li>
-
</ul>
-
</li>
-
</ul>
-
</div>
-
</body>
-
</html>
-
- body{font-size:0.85em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#wrapper {width:217px;margin:0 auto;}
-
#nav,
-
#nav
-
ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;li
-
ne-height:1.5em; }
-
#nav a{display:block;padding:0px 5px;border:1px solid
-
#333;color:#fff;text-decoration:none;background-color:#333;}
-
#nav a:hover{background-color:#fff;color:#333;}
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.5em;}
-
#nav li ul a{width:12em;height:auto;float:left;}
-
#nav ul ul{top:auto;}
-
#nav li ul ul {left:12em;margin:0px 0 0 10px;}
-
#nav li:hover ul ul, #nav li:hover ul ul ul,
-
#nav
-
li:hover ul ul ul ul{display:none;}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
I tested it in Safari on my Mac and don't have time to test it on other browsers. If there are any problems please let me know. Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi Sir,
Thanks... Tried your code, didnt go exactly, it only went half well. I want to do something like www.spatec.com.sg where I click under the main menu "STUDENT INFORMATION" where the sub menu comes out and the picture on it does not overlap(or overshadow) the items under the "STUDENT INFORMATION" sub menu...(meaning the items and border under the "STUDENT INFORMATION" sub menu will cover the picture and wordings in the main page)
Kindly assist...
Thanks in advance,
Andrew
Take a look at the z-index property. Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi Sir,
Still cant work.. below is my code for z-index:-1... applied it in css code. Html code also attached for verification. not sure if i did it correctly?
btw, I just want the sub menu when i click to completely overwrite and cover the picture and wording in the main page when i click "STUDENT INFORMATION" in www.spatec.com.sg..
Kindly enlighten...
Thanks in advance again,
Andrew
css code with z-index:-1
================== -
-
body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
-
line-height:1.6em;}
-
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
-
#fff;text-decoration:none;background-color:
-
#ff00ff;}
-
#nav a:hover{background-color:
-
#fff;color:
-
#333;}
-
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
-
#nav li ul a{width:12em;height:auto;float:left;border:1px solid #fff;}
-
#nav ul ul{top:auto;}
-
#navbar li ul ul {left:12em;margin:0px 0 0 10px}
-
#nav li:hover ul ul,
-
#nav li:hover ul ul ul,
-
#nav li:hover ul ul ul ul{display:none;}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
-
b) html code(partial)
===============
You didn't read the article... giving an element a z-index of -1 will place it behind the other elements. Try giving it a z-index of 1 and seeing what it does. Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi Sir,
Tried with -1 and 1 already before i posted the previous article, and tried just now also did not work. Before is the code(where is the best place to put? and how to interpret where to put?)
got 2 scenarios below.. Thanks in advance again...
Thanks and Best Rgds,
Andrew
Tried with all 4 z index of -1
-------------------------------- -
-
body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
-
line-height:1.6em;}
-
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
-
#fff;text-decoration:none;background-color:
-
#ff00ff;}
-
#nav a:hover{background-color:
-
#fff;color:
-
#333;}
-
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:-1;}
-
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:-1;}
-
#nav ul ul{top:auto;}
-
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:-1;}
-
#nav li:hover ul ul,
-
#nav li:hover ul ul ul,
-
#nav li:hover ul ul ul ul{display:block;z-index:-1}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
-
-
-
tried with all 4 z index of 1
--------------------------------------- -
-
body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
-
line-height:1.6em;}
-
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
-
#fff;text-decoration:none;background-color:
-
#ff00ff;}
-
#nav a:hover{background-color:
-
#fff;color:
-
#333;}
-
-
#nav li{float:left;position:relative;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:1;}
-
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:1;}
-
#nav ul ul{top:auto;}
-
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:1;}
-
#nav li:hover ul ul,
-
#nav li:hover ul ul ul,
-
#nav li:hover ul ul ul ul{display:block;z-index:1}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;}
-
-
Hi Sir / all,
With External Css page, the z-index seemed not to be working. (maybe i did it wrongly, but the results i tried many different ways not working), the css code and html are below...
With internal css(meaning css inside the html page), the z-index is working...
Kindly assist.
Thanks and Best Rgds,
Andrew
css code
======= -
-
body{font-size:0.75em;font-family:Verdana, Arial, Helvetica, sans-serif;}
-
#nav,
-
#nav
-
ul{margin:0.99;padding:0;list-style-type:none;list-style-position:inside;position:relative;
-
line-height:1.6em;z-index:2;}
-
#nav a{display:block;padding:0px 5px;border:1px solid #fff;color:
-
#fff;text-decoration:none;background-color:
-
#ff00ff;z-index:2;}
-
#nav a:hover{background-color:
-
#fff;color:
-
#333;z-index:2;}
-
-
#nav li{float:left;position:relative;z-index:2;}
-
#nav ul {position:absolute;display:none;width:12em;top:1.8em;z-index:2;}
-
#nav li ul a{width:12em;height:auto;float:left;border:1px solid; #fff;z-index:2;}
-
#nav ul ul{top:auto;}
-
#navbar li ul ul {left:12em;margin:0px 0 0 10px;z-index:2;}
-
#nav li:hover ul ul,
-
#nav li:hover ul ul ul,
-
#nav li:hover ul ul ul ul{display:block;z-index:2;}
-
#nav li:hover ul,
-
#nav li li:hover ul,
-
#nav li li li:hover ul,
-
#nav li li li li:hover ul{display:block;z-index:2;}
-
html code
=======
I am at school right now, and about to take a Chemistry test. As soon as I get a chance today I will attempt to find you a solution. I have a working example of the code you gave before somewhere. Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
thanks! Sir, hopefully your test turn out well...
I saw this post with z-index and em, but not sure whether it is applicable...
Tried for a while but did not work...
kindly assist.
Cheers...
Andrew Overlapping And Z Index - css-discuss
the above is urgent, I would appreciate very much if
anyone could help on not letting the background pictures and wordings overwrite the external css horizontal drop down menu's items... thanks in advance!!
Hi Sirs / Mdms,
It is working now... attached is the codes...
Thanks to this website(10 Stars tutorial for CSS), Alsacreations, XHTML and CSS drop-down menu
Cheers...
Andrew
complete code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="XHTML namespace">
-
<head>
-
</head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title></title>
-
<style type="text/css" media="screen">
-
<!--
-
body {
-
margin: 0;
-
padding: 0;
-
background: white;
-
font: 80% verdana, arial, sans-serif;
-
}
-
dl, dt, dd, ul, li {
-
margin: 0;
-
padding: 0;
-
list-style-type: none;
-
}
-
#menu {
-
position: absolute; /* Menu position that can be changed at will */
-
top: 0;
-
left: 0;
-
z-index:100;
-
width: 100%; /* precision for Opera */
-
}
-
#menu dl {
-
float: left;
-
width: 12em;
-
}
-
#menu dt {
-
cursor: pointer;
-
text-align: center;
-
font-weight: bold;
-
background: #ccc;
-
border: 1px solid gray;
-
margin: 1px;
-
}
-
#menu dd {
-
display: none;
-
border: 1px solid gray;
-
}
-
#menu li {
-
text-align: center;
-
background: #fff;
-
}
-
#menu li a, #menu dt a {
-
color: #000;
-
text-decoration: none;
-
display: block;
-
height: 100%;
-
border: 0 none;
-
}
-
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
-
background: #eee;
-
}
-
#site {
-
position: absolute;
-
z-index: 1;
-
top : 70px;
-
left : 10px;
-
color: #000;
-
background-color: #ddd;
-
padding: 5px;
-
border: 1px solid gray;
-
}
-
-->
-
</style>
-
-
-
<script type="text/javascript">
-
<!--
-
window.onload=show;
-
function show(id) {
-
var d = document.getElementById(id);
-
for (var i = 1; i<=10; i++) {
-
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
-
}
-
if (d) {d.style.display='block';}
-
}
-
//-->
-
</script>
-
<link rel="stylesheet" href="suckerfish.css" type="text/css" media="screen" />
-
-
-
<b>
-
<body bgcolor="#FFFFFF" text="#000000">
-
<div id="bv_Shape1" style="position:absolute;left:100px;top:50px;width:928px;height:600px;z-index:0" align="center">
-
<img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
-
<div id="bv_TextMenu2" style="position:absolute;left:100px;top:100px;width:67px;height:34px;z-index:4" align="center">
-
<font style="font-size:13px;" color="#000000" face="Arial">
-
[<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
-
-
-
<div id="menu">
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
-
<dd id="smenu1">
-
<ul>
-
<li><a href="#">sub-menu 1.1</a></li>
-
<li><a href="#">sub-menu 1.2</a></li>
-
<li><a href="#">sub-menu 1.3</a></li>
-
<li><a href="#">sub-menu 1.4</a></li>
-
<li><a href="#">sub-menu 1.5</a></li>
-
<li><a href="#">sub-menu 1.6</a></li>
-
</ul>
-
</dd>
-
</dl>
-
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
-
<dd id="smenu3">
-
<ul>
-
<li><a href="#">sub-menu 3.1</a></li>
-
<li><a href="#">sub-menu 3.2</a></li>
-
<li><a href="#">sub-menu 3.3</a></li>
-
<li><a href="#">sub-menu 3.4</a></li>
-
<li><a href="#">sub-menu 3.5</a></li>
-
</ul>
-
</dd>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
-
<dd id="smenu4">
-
<ul>
-
<li><a href="#">sub-menu 4.1</a></li>
-
<li><a href="#">sub-menu 4.2</a></li>
-
<li><a href="#">sub-menu 4.3</a></li>
-
</ul>
-
</dd>
-
</dl>
-
</div>
-
<div id="bv_Text3" style="position:absolute;left: 100px;top:50px;width:723px;height:48px;z-index:14" align="left">
-
<font style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
-
<br>
-
Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
-
<div id="bv_Image4" style="overflow:hidden;position:absolute;left:180px;top:70px;z-index:15" align="left">
-
<img src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
-
<div id="bv_Image8" style="overflow:hidden;position:absolute;left:180px;top:631px;z-index:16" align="left">
-
<img src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
-
<div id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
-
<img src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
-
<div id="bv_Text4" style="position:absolute;left:180px;top:50px;width:407px;height:91px;z-index:18" align="left">
-
<font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
-
Designed by Goldbiztrading Andrew Se<br>
-
-
</b>
-
</body>
-
</html>
-
hi all,
Btw, I was trying to separate and put the css and javascript into different file rather than put into html to manage better the code, but was having problem as the drop down menu did not show at all...
Any workaround?
Cheers...
Andrew
html
==== -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="XHTML namespace">
-
<head>
-
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title></title>
-
-
-
-
-
-
<link rel="stylesheet" href="suckerfish3.css" type="text/css" media="screen" />
-
<script type='text/javascript' src='suckerfish3.js'></script>
-
</head>
-
-
<b>
-
<body bgcolor="#FFFFFF" text="#000000">
-
<div id="bv_Shape1" style="position:absolute;left:100px;top:50px;width:928px;height:600px;z-index:0" align="center">
-
<img src="pink.jpg" id="Shape1" align="top" alt="" title="" border="0" width="928" height="590"></div>
-
<div id="bv_TextMenu2" style="position:absolute;left:100px;top:100px;width:67px;height:34px;z-index:4" align="center">
-
<font style="font-size:13px;" color="#000000" face="Arial">
-
[<a href="http://127.0.0.1/feedback.html" title="Click Here to see the feedback">Feedback</a>]</font></div>
-
-
-
<div id="menu">
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
-
<dd id="smenu1">
-
<ul>
-
<li><a href="#">sub-menu 1.1</a></li>
-
<li><a href="#">sub-menu 1.2</a></li>
-
<li><a href="#">sub-menu 1.3</a></li>
-
<li><a href="#">sub-menu 1.4</a></li>
-
<li><a href="#">sub-menu 1.5</a></li>
-
<li><a href="#">sub-menu 1.6</a></li>
-
</ul>
-
</dd>
-
</dl>
-
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
-
<dd id="smenu3">
-
<ul>
-
<li><a href="#">sub-menu 3.1</a></li>
-
<li><a href="#">sub-menu 3.2</a></li>
-
<li><a href="#">sub-menu 3.3</a></li>
-
<li><a href="#">sub-menu 3.4</a></li>
-
<li><a href="#">sub-menu 3.5</a></li>
-
</ul>
-
</dd>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
-
<dd id="smenu4">
-
<ul>
-
<li><a href="#">sub-menu 4.1</a></li>
-
<li><a href="#">sub-menu 4.2</a></li>
-
<li><a href="#">sub-menu 4.3</a></li>
-
</ul>
-
</dd>
-
</dl>
-
</div>
-
<div id="bv_Text3" style="position:absolute;left: 100px;top:50px;width:723px;height:48px;z-index:14" align="left">
-
<font style="font-size:13px" color="#000000" face="Arial"><b><u>Graduates Photos</u><br>
-
<br>
-
Graduates of 1st IFA Diploma in Aromatherapy</b></font></div>
-
<div id="bv_Image4" style="overflow:hidden;position:absolute;left:180px;top:70px;z-index:15" align="left">
-
<img src="gra_1.jpg" id="Image4" alt="" align="top" border="0" style="width:620px;height:315px;"></div>
-
<div id="bv_Image8" style="overflow:hidden;position:absolute;left:180px;top:631px;z-index:16" align="left">
-
<img src="bottom_bg.jpg" id="Image8" alt="" align="top" border="0" style="width:924px;height:84px;"></div>
-
<div id="bv_Image5" style="overflow:hidden;position:absolute;left:424px;top:719px;z-index:17" align="left">
-
<img src="link1.jpg" id="Image5" alt="" align="top" border="0" style="width:364px;height:60px;"></div>
-
<div id="bv_Text4" style="position:absolute;left:180px;top:50px;width:407px;height:91px;z-index:18" align="left">
-
<font style="font-size:16px" color="#000000" face="Times New Roman">Copyright © 2008 <b>SPATEC PTE LTD</b><br>
-
Designed by Goldbiztrading Andrew Se<br>
-
-
</b>
-
</body>
-
</html>
-
-
javascript
======== -
<script type="text/javascript">
-
<!--
-
window.onload=show;
-
function show(id) {
-
var d = document.getElementById(id);
-
for (var i = 1; i<=100; i++) {
-
if (document.getElementById('smenu'+i))
-
{document.getElementById('smenu'+i).style.display='none';}
-
}
-
if (d) {d.style.display='block';}
-
}
-
//-->
-
</script>
-
css code -
body {
-
margin: 0;
-
padding: 0;
-
background: white;
-
font: 80% verdana, arial, sans-serif;
-
}
-
dl, dt, dd, ul, li {
-
margin: 0;
-
padding: 0;
-
list-style-type: none;
-
}
-
#menu {
-
position: relative; /* Menu position that can be changed at will */
-
top: 0;
-
left: 0;
-
z-index:100;
-
width: 100%; /* precision for Opera */
-
}
-
#menu dl {
-
float: left;
-
width: 12em;
-
}
-
#menu dt {
-
cursor: pointer;
-
text-align: center;
-
font-weight: bold;
-
background: #ccc;
-
border: 1px solid gray;
-
margin: 1px;
-
}
-
#menu dd {
-
display: none;
-
border: 1px solid gray;
-
}
-
#menu li {
-
text-align: center;
-
background: #fff;
-
}
-
#menu li a, #menu dt a {
-
color: #ff00ff;
-
text-decoration: none;
-
display: block;
-
height: 100%;
-
border: 0 none;
-
}
-
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
-
background: #eee;
-
}
-
#site {
-
position: absolute;
-
z-index: 1;
-
top : 70px;
-
left : 10px;
-
color: #000;
-
background-color: #ddd;
-
padding: 5px;
-
border: 1px solid gray;
-
}
-
I am really sorry I have not been able to get back to this until now. We were hit with a major cold front and all the snow nocked out my Internet. We have not had school all week either.
I have completely lost track of what you wanted. Could you please repost the following: - The problem/s you are encountering.
- What you have tried to fix them.
- The code you used.
- A working example of what you want (Preferably with validated HTML/XHTML, and CSS).
Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi Sir,
Sorry to hear about the internet...
Below is the full code, I want to be able to collapse the submenu once i dont click on the submenu anymore, but it havent been able to achieve...
Tried on some websites including Building An Expanding DHTML Menu With CSS and JavaScript
javasript code -
.submenu{
-
background-image: url(images/submenu.gif);
-
display: block;
-
height: 19px;
-
margin-left: 38px;
-
padding-top: 2px;
-
padding-left: 7px;
-
color: #333333;
-
}
-
-
.hide{
-
display: none;
-
}
-
-
I'll also create the style that will show the hidden div tags (submenus):
-
-
.show{
-
display: block;
-
}
-
-
Thanks and Best Rgds,
Full code -
<HTML>
-
<BODY>
-
<head>
-
<style type="text/css" media="screen">
-
<!--
-
body {
-
margin: 0;
-
padding: 0;
-
background: white;
-
font: 80% verdana, arial, sans-serif;
-
}
-
dl, dt, dd, ul, li {
-
margin: 0;
-
padding: 0;
-
list-style-type: none;
-
height: 2.7em;
-
}
-
#menu {
-
position: relative; /* Menu position that can be changed at will */
-
top: 0;
-
left: 0;
-
z-index:100;
-
width: 100%; /* precision for Opera */
-
}
-
#menu dl {
-
float: left;
-
width: 9em;
-
height: 1.6em;
-
}
-
-
#menu dt {
-
cursor: pointer;
-
text-align: Center;
-
font-weight: bold;
-
background: #ff00ff;
-
border: 1px solid gray;
-
color:#fff;
-
margin: 1px;
-
}
-
#menu dd {
-
display: block;
-
text-align: left;
-
color:#FF6900;
-
margin: 1px;
-
-
}
-
#menu li {
-
text-align: center;
-
background: #fff;
-
height : 1.6em;
-
}
-
#menu li a, #menu dt a {
-
color: #000000;
-
text-decoration: none;
-
display: block;
-
height: 0.8em;
-
-
}
-
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
-
background: #ff33ff;
-
display: block;
-
height : 1.6em;
-
}
-
#site {
-
position: absolute;
-
z-index: 1;
-
top : 70px;
-
left : 10px;
-
color: #000;
-
background-color: #ddd;
-
padding: 5px;
-
border: 1px purple;
-
display: block;
-
}
-
-->
-
</style>
-
<script language="JavaScript" type="text/JavaScript">
-
<!--
-
function MM_jumpMenu(targ,selObj,restore){ //v3.0
-
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
-
if (restore) selObj.selectedIndex=0;
-
}
-
window.onload=show;
-
function show(id) {
-
var d = document.getElementById(id);
-
for (var i = 1; i<=2100; i++) {
-
if (document.getElementById('smenu'+i))
-
{document.getElementById('smenu'+i).style.display='none';}
-
}
-
if (d) {d.style.display='block';}
-
-
}
-
-
//-->
-
</script>
-
</head>
-
-
<body bgcolor="#FFFFFF" text="#000000">
-
-
<div id="menu" style="position:absolute;left:210px;top:680px; align="center";>
-
<dl>
-
<dt onmouseover="javascript:show('smenu1');">Home</dt>
-
<dd id="smenu1">
-
<ul>
-
<li><a
-
href="http://127.0.0.1/gra_photos.html">Graduates</a></li>
-
<li><a href="http://127.0.0.1/news.html">Photo</a></li>
-
<li><a href="http://127.0.0.1/promotion.html">Promotions</a></li>
-
</ul>
-
</dd>
-
</dl>
-
-
<dl>
-
<dt onmouseover="javascript:show('smenu2');">About SPAtec</dt>
-
<dd id="smenu2">
-
<ul>
-
<li><a
-
href="http://127.0.0.1/welcome_msg.html">Welcome</a></li>
-
<li><a
-
href="http://127.0.0.1/vision.html">Vision & Mission</a></li>
-
<li><a
-
href="http://127.0.0.1/com_background.html">Company Business</a></li>
-
<li><a
-
href="http://127.0.0.1/com_facilities.html...lities</a></li>
-
</ul>
-
</dd>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu3');">Training and Education</dt>
-
<dd id="smenu3">
-
<ul>
-
<li><a
-
href="http://127.0.0.1/courses.html">Courses</a></li>
-
<li><a
-
href="http://127.0.0.1/certification.html"...cation</a></li>
-
<li><a
-
href="http://127.0.0.1/promotion.html">Promotions</a></li>
-
</ul>
-
</dd>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu4');">Trainers</dt>
-
<dd id="smenu4">
-
<ul>
-
<li><a
-
href="http://127.0.0.1/trainer.html">Trainer's Profile</a></li>
-
</ul>
-
</dd>
-
</dl>
-
</div>
-
-
</BODY>
-
</HTML>
-
-
hi all,
Resolved, silly bug i created myself... forgot to put
dt onmouseover="javascript :show();"
working partial code -
<dt onmouseover="javascript:show();"><a href="" title="Return to
-
home">Home</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
-
<dd id="smenu1">
-
<ul>
-
<li><a href="#">sub-menu 1.1</a></li>
-
<li><a href="#">sub-menu 1.2</a></li>
-
<li><a href="#">sub-menu 1.3</a></li>
-
<li><a href="#">sub-menu 1.4</a></li>
-
<li><a href="#">sub-menu 1.5</a></li>
-
<li><a href="#">sub-menu 1.6</a></li>
-
</ul>
-
</dd>
-
</dl>
-
below is the completecode...btw, how do i do external css file with the css below?
Cheers...
Andrew
complete code -
-
<HTML>
-
<BODY>
-
<head>
-
<style type="text/css" media="screen">
-
<!--
-
body {
-
margin: 0;
-
padding: 0;
-
background: white;
-
font: 80% verdana, arial, sans-serif;
-
}
-
dl, dt, dd, ul, li {
-
margin: 0;
-
padding: 0;
-
list-style-type: none;
-
height: 2.7em;
-
}
-
#menu {
-
position: relative; /* Menu position that can be changed at will */
-
top: 0;
-
left: 0;
-
z-index:100;
-
width: 100%; /* precision for Opera */
-
}
-
#menu dl {
-
float: left;
-
width: 9em;
-
height: 1.6em;
-
}
-
-
#menu dt {
-
cursor: pointer;
-
text-align: Center;
-
font-weight: bold;
-
background: #ff00ff;
-
border: 1px solid gray;
-
color:#fff;
-
margin: 1px;
-
}
-
#menu dd {
-
display: block;
-
text-align: left;
-
color:#FF6900;
-
margin: 1px;
-
-
}
-
#menu li {
-
text-align: center;
-
background: #fff;
-
height : 1.6em;
-
}
-
#menu li a, #menu dt a {
-
color: #000000;
-
text-decoration: none;
-
display: block;
-
height: 0.8em;
-
-
}
-
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
-
background: #ff33ff;
-
display: block;
-
height : 1.6em;
-
}
-
#site {
-
position: absolute;
-
z-index: 1;
-
top : 70px;
-
left : 10px;
-
color: #000;
-
background-color: #ddd;
-
padding: 5px;
-
border: 1px purple;
-
display: block;}
-
-->
-
</style>
-
<script language="JavaScript" type="text/JavaScript">
-
<!--
-
function MM_jumpMenu(targ,selObj,restore){ //v3.0
-
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
-
if (restore) selObj.selectedIndex=0;
-
}
-
window.onload=show;
-
function show(id) {
-
var d = document.getElementById(id);
-
for (var i = 1; i<=10; i++) {
-
if (document.getElementById('smenu'+i))
-
{document.getElementById('smenu'+i).style.display='none';}
-
}
-
if (d) {d.style.display='block';}
-
}
-
-
//-->
-
</script>
-
</head>
-
-
<body bgcolor="#FFFFFF" text="#000000">
-
<div id="bv_Image2"
-
style="overflow:hidden;position:absolute;left:182px;top:720px;z-index:0" align="left">
-
<img src="sante_index_c1.jpg" id="Image2" alt="" align="top" border="0"
-
style="width:758px;height:201px;"></div>
-
<div id="bv_WinMedia1"
-
style="position:absolute;left:187px;top:0px;width:321px;height:212px;z-index:1"
-
align="left">
-
<embed src="birds.wmv" id="WinMedia1" border="0" autostart="true" loop="true" width="321"
-
height="212">
-
</div>
-
<div id="bv_Text1"
-
style="position:absolute;left:325px;top:752px;width:444px;height:16px;z-index:2"
-
align="left">
-
</div>
-
<div id="bv_Image5"
-
style="overflow:hidden;position:absolute;left:504px;top:994px;z-index:3" align="left">
-
<img src="Tagline_sm.jpg" id="Image5" alt="" align="top" border="0"
-
style="width:100px;height:45px;"></div>
-
<div id="bv_Image3"
-
style="overflow:hidden;position:absolute;left:182px;top:920px;z-index:4" align="left">
-
<img src="black.JPG" id="Image3" alt="" align="top" border="0"
-
style="width:758px;height:70px;"></div>
-
<div id="bv_Text2"
-
style="position:absolute;left:213px;top:932px;width:684px;height:63px;z-index:5"
-
align="center">
-
<font style="font-size:13px" color="#FFFFFF" face="Arial">122 Middle Road #03-07 Midlink
-
Plaza Singapore 188973 <br>
-
Best viewed in 800*600 and IE 4.0 and above.<br>
-
copyright©2008 Santehealth</font><font style="font-size:13px" color="#000000"
-
face="Arial"><br>
-
</font></div>
-
<div id="bv_TextMenu1"
-
style="position:absolute;left:781px;top:3px;width:150px;height:18px;z-index:6"
-
align="center">
-
<font style="font-size:13px;" color="#000000" face="Arial">
-
[<a href="" target="http://">Chinese </a>] [<a
-
href="http://">English</a>]</font></div>
-
<div id="bv_Image6"
-
style="overflow:hidden;position:absolute;left:411px;top:501px;z-index:7" align="left">
-
<img src="P3240045.JPG" id="Image6" alt="" align="top" border="0"
-
style="width:311px;height:167px;"></div>
-
<div id="bv_Image7"
-
style="overflow:hidden;position:absolute;left:444px;top:236px;z-index:8" align="left">
-
<img src="P3240010.JPG" id="Image7" alt="" align="top" border="0"
-
style="width:212px;height:116px;"></div>
-
<div id="bv_Image8"
-
style="overflow:hidden;position:absolute;left:186px;top:499px;z-index:9" align="left">
-
<img src="P3240029.JPG" id="Image8" alt="" align="top" border="0"
-
style="width:225px;height:168px;"></div>
-
<div id="bv_Image9"
-
style="overflow:hidden;position:absolute;left:186px;top:236px;z-index:10" align="left">
-
<img src="P3240038.JPG" id="Image9" alt="" align="top" border="0"
-
style="width:260px;height:265px;"></div>
-
<div id="bv_Image10"
-
style="overflow:hidden;position:absolute;left:721px;top:501px;z-index:11" align="left">
-
<img src="P3240037.JPG" id="Image10" alt="" align="top" border="0"
-
style="width:219px;height:167px;"></div>
-
<div id="bv_Image11"
-
style="overflow:hidden;position:absolute;left:508px;top:42px;z-index:12" align="left">
-
<img src="P3240002.JPG" id="Image11" alt="" align="top" border="0"
-
style="width:431px;height:170px;"></div>
-
<div id="bv_Image4"
-
style="overflow:hidden;position:absolute;left:447px;top:353px;z-index:13" align="left">
-
<img src="sante_top_banner_bg.jpg" id="Image4" alt="" align="top" border="0"
-
style="width:488px;height:147px;"></div>
-
<div id="bv_Image1"
-
style="overflow:hidden;position:absolute;left:656px;top:234px;z-index:14" align="left">
-
<img src="P3240045.JPG" id="Image1" alt="" align="top" border="0"
-
style="width:283px;height:268px;"></div>
-
<div id="bv_Image12"
-
style="overflow:hidden;position:absolute;left:182px;top:668px;z-index:15" align="left">
-
<img src="black.JPG" id="Image12" alt="" align="top" border="0"
-
style="width:758px;height:52px;"></div>
-
<div id="bv_Image13"
-
style="overflow:hidden;position:absolute;left:186px;top:212px;z-index:16" align="left">
-
<img src="black.JPG" id="Image13" alt="" align="top" border="0"
-
style="width:753px;height:25px;"></div>
-
-
<div id="menu" style="position:absolute;left:210px;top:680px; align="center";>
-
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="" title="Return to
-
home">Home</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
-
<dd id="smenu1">
-
<ul>
-
<li><a href="#">sub-menu 1.1</a></li>
-
<li><a href="#">sub-menu 1.2</a></li>
-
<li><a href="#">sub-menu 1.3</a></li>
-
<li><a href="#">sub-menu 1.4</a></li>
-
<li><a href="#">sub-menu 1.5</a></li>
-
<li><a href="#">sub-menu 1.6</a></li>
-
</ul>
-
</dd>
-
</dl>
-
-
<dl>
-
<dt onmouseover="javascript:show();"><a href="">Menu 2</a></dt>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
-
<dd id="smenu3">
-
<ul>
-
<li><a href="#">sub-menu 3.1</a></li>
-
<li><a href="#">sub-menu 3.2</a></li>
-
<li><a href="#">sub-menu 3.3</a></li>
-
<li><a href="#">sub-menu 3.4</a></li>
-
<li><a href="#">sub-menu 3.5</a></li>
-
</ul>
-
</dd>
-
</dl>
-
<dl>
-
<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
-
<dd id="smenu4">
-
<ul>
-
<li><a href="#">sub-menu 4.1</a></li>
-
<li><a href="#">sub-menu 4.2</a></li>
-
<li><a href="#">sub-menu 4.3</a></li>
-
</ul>
-
</dd>
-
</dl>
-
-
</div>
-
-
<div class="x"
-
style="position:absolute;left:630px;top:0px;width:723px;height:48px;z-index:14"
-
align="left">
-
<font class="x" style="font-size:13px" color="#000000" face="Arial"><b>
-
Sante Related</b></font></div>
-
<form name="form1"
-
style="position:absolute;left:630px;top:6px;width:150px;font-family:Courier
-
New;font-size:16px;z-index:24>
-
<p><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica,
-
sans-serif">
-
<br>
-
</font></strong></p>
-
<select name="menu1" size="1"
-
onChange="MM_jumpMenu('parent',this,0)">
-
<option value="SanteHealth"
-
selected>Santehealth</option>
-
<option value="http://www.spatec.com.sg/courses.html">Training
-
Courses</option>
-
<option
-
value="http://www.santehealth.com.sg/eturning.html">E-Turning
-
Point</option>
-
</select>
-
</p>
-
</form>
-
<div class="x"
-
style="position:absolute;left:779px;top:0px;width:723px;height:48px;z-index:14"
-
align="left">
-
<font class="x" style="font-size:13px" color="#000000" face="Arial"><b>
-
Franchise Branches</b></font></div>
-
<form name="form2"
-
style="position:absolute;left:779px;top:6px;width:150px;font-family:Courier
-
New;font-size:16px;z-index:24>
-
<p><strong><font color="#FFFFFF" size="2" face="Arial, Helvetica,
-
sans-serif">
-
<br>
-
</font></strong></p>
-
<p>
-
<select name="menu2" size="1"
-
onChange="MM_jumpMenu('parent',this,0)">
-
<option value="SanteHealth"
-
selected>Franchise1</option>
-
<option value="http://www.spatec.com.sg/courses.html">Franchise
-
2</option>
-
<option
-
value="http://www.santehealth.com.sg/eturning.html">Franchise 3</option>
-
</select>
-
</p>
-
</form>
-
</BODY>
-
</HTML>
-
-
Did you mean that you wanted the menu to collapse when the mouse is no longer hovering it? Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
yes... cheers...
was my answer correct? any alternatives??
thanks again...
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Bil Muh |
last post by:
Esteemede Developers,
I would like to Thank All of You in advance for your sincere guidances.
I am developing a software using Visual C++ .NET Standard Edition with
Windows Form (.NET)...
|
by: SamIAm |
last post by:
Hi am creating a email application that needs to mail out a very large
amount of emails. I have created a multithreaded c# application that using
message queuing. I have created a threadpool of 5...
|
by: Richard Skopal |
last post by:
In .NET Windows forms I can create a metafile using this code:
Graphics grph = aControl.CreateGraphics();
IntPtr ipHDC = grph.GetHdc();
Metafile mf = new Metafile(aImgFilePath, ipHDC,...
|
by: rishi145 |
last post by:
i want to build a small cms and wanted to know if it was possible to
generate a aspx page dynamically? if so how
basically i wan to be able to have a button create new page and name
it.
thanks...
|
by: sandy |
last post by:
I need (okay, I want) to make a dynamic array of my class 'Directory',
within my class Directory (Can you already smell disaster?)
Each Directory can have subdirectories so I thought to put these...
|
by: max |
last post by:
Hello,
I am a newbye, and I'm trying to write a simple application.
I have five tables with three columns; all tables are identical; I need to
change some data in the first table and let VB...
|
by: Stan Brown |
last post by:
I posted over the holidays, but I venture to repost since there were
no responses. Maybe people overlooked my article among all the
excitement.
I'm looking for a template or model for menus that...
|
by: MaryamSh |
last post by:
Hi,
I am creating a Dynamic Search in my application.
I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove)
By pressing Add button...
|
by: MaryamSh |
last post by:
Create Dynamic Dropdownlist Controls and related event
--------------------------------------------------------------------------------
Hi,
I am creating a Dynamic Search in my application.
I...
|
by: 100grand |
last post by:
Modify the Inventory Program to use a GUI. The GUI should display the information one
product at a time, including the item number, the name of the product, the number of
units in stock, the price...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
| |