|
|
 | dropdown menu
Fra :  ritter666 | Vist : 477 gange
75 point
Dato : 05-10-05 16:40 |
|
hvordan laver jeg på letteste måde en dropdownmenu på min side, det skal selvfølgelig se nogenlunde ud.
| |
| Kommentar
Fra : smxxx |
Dato : 05-10-05 16:50 |
| | |
 | Kommentar
Fra : surfsusan  |
Dato : 05-10-05 16:50 |
| | |
| Kommentar
Fra : surfsusan |
Dato : 05-10-05 16:51 |
| | |
 | Kommentar
Fra : bentjuul |
Dato : 05-10-05 17:12 |
| | |
 | Kommentar
Fra : BjarneD |
Dato : 05-10-05 21:38 |
| | |
 | Kommentar
Fra : severino |
Dato : 05-10-05 21:53 |
|
Prøv denne, og udvid selv menuerne efter behov!
Kode
<html>
<head>
<!--Kilde: http://tutorials.alsacreations.com/deroulant/-->
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: white;
font: 11px 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: 9em;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: normal;
background: #ccc;
border: 2px solid red;
margin: 1px;
font: 11px verdana, arial, sans-serif;
}
#menu dd {
display: block;
border: 2px solid green; /* Display blok border farve */
}
#menu li {
text-align: left;
background: #ff0; /* display blok */
}
#menu li a, #menu dt a {
color: #00f; /* Tekst farve i display blok */
text-decoration: none;
display: block;
height: 100%;
border: 1 ;
}
#menu li a
{
font-size:12px;
}
#menu li a:hover
{
font-size:12px;
background: #eee;
}
#menu li a:active
{
font-size:12px;
}
/*, #menu dt a:hover, #menu dt a:focus */ { /*
font-size:12px;
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>
<head>
<body>
<table border="0" width="760" align="center" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<!----------------------------------------->
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu1');">Info</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 1,1</a></li>
<li><a href="#">link 1,2</a></li>
<li><a href="#">link 1,3</a></li>
<li><a href="#">link 1,4</a></li>
<li><a href="#">link 1,5</a></li>
<li><a href="#">link 1,6</a></li>
<li><a href="#">link 1,7</a></li>
</ul>
</dd>
</dl>
</td><td valign="top">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu2');">Info</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 2,1</a></li>
<li><a href="#">link 2,2</a></li>
<li><a href="#">link 2,3</a></li>
</ul>
</dd>
</dl>
</td><td valign="top">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu3');">Info</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 3,1</a></li>
<li><a href="#">link 3,2</a></li>
<li><a href="#">link 3,3</a></li>
<li><a href="#">link 3,4</a></li>
<li><a href="#">link 3,5</a></li>
<li><a href="#">link 3,6</a></li>
<li><a href="#">link 3,7</a></li>
<li><a href="#">link 3,8</a></li>
<li><a href="#">link 3,9</a></li>
</ul>
</dd>
</dl>
</td><td valign="top">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu4');">Info</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 4,1</a></li>
<li><a href="#">link 4,2</a></li>
<li><a href="#">link 4,3</a></li>
</ul>
</dd>
</dl>
<!---------------------------------------------->
</td><td valign="top" width="70">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu5');">Info</dt>
<dd id="smenu5" onmouseover="javascript:show('smenu5');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 5,1</a></li>
<li><a href="#">link 5,2</a></li>
</ul>
</dd>
</dl>
</td><td valign="top" width="70">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu6');">Info</dt>
<dd id="smenu6" onmouseover="javascript:show('smenu6');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">sub-menu 6.1</a></li>
<li><a href="#">sub-menu 6.2</a></li>
<li><a href="#">sub-menu 6.3</a></li>
</ul>
</dd>
</dl>
</td><td valign="top" width="70">
<div id="menu">
<dl>
<dt onmouseover="javascript:show('smenu7');">Info</dt>
<dd id="smenu7" onmouseover="javascript:show('smenu7');" onmouseout="javascript:show('');">
<ul>
<li><a href="#">link 7,1</a></li>
<li><a href="#">link 7,2</a></li>
<li><a href="#">link 7,3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html> |
 | |
 | Du har følgende muligheder | |
|
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
| |
|
|