dropdownmenu + linken (link aanbrengen)

Status
Niet open voor verdere reacties.
P

Pellekaart

Gebruiker
Lid geworden
25 jun 2012
Berichten
48
Ik heb geprobeerd een heel simpel dropdownmenu te maken.
Dat is me gelukt, nu wil ik aan deze items een link maken.
Iemand een idee hoe ik dat (zo simpel mogelijk) kan doen?

groeten Pellekaart

Hieronder de html en de CSS

html - -- - - - - - - - - - - -

<body>
<ul><li>pagina 7<ul>
<li>pagina 6</li>
<li>pagina 5</li>
<li>pagina 4</li>
<li>pagina 3</li>
<li>pagina 2</li>
<li>pagina 1</li>
</ul>
</li>

</ul>

CSS - - - - - - - - - - - - -

ul {
display: block;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
width: 75px;
position: absolute;
text-align: center;
height: 0px;
left: 50px;
top: 75px;
}
ul li {
display: block;
position: absolute;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
background-color: rgb(34,34,34);
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 18px;
z-index: 2;
text-align: center;
width: 75px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
height: 20px;
color: rgb(238,238,238);
top: -10px;
letter-spacing: 0.2em;
}
ul li:hover {
color: #6FF;
z-index: 2;
text-align: center;
position: absolute;
height: 40px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 75px;
}
ul li ul {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align: center;
margin-left: -150px;
height: 20px;
}
ul li ul li {
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
text-align: center;
height: 20px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
width: 75px;
}
ul li ul li:hover {
background-color: #DDD;
text-align: center;
display: block;
position: relative;
height: 20px;
width: 75px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
text-align: center;
height: 20px;
width: 75px;
left: 100px;
top: 25px;
position: relative;
}
 
Als het goed is moet het zo:
Code: 
HTML - - - - - - - - - - - - -




</html>
<body>
<ul><li><a href="test.html">pagina 7</a><ul>
<li><a href="test1.html">pagina 6</a></li>
<li><a href="test2.html">pagina 5</a></li>
<li><a href="test3.html">pagina 4</a></li>
<li><a href="test4.html">pagina 3</a></li>
<li><a href="test6.html">pagina 2</a></li>
<li><a href="test7.html">pagina 1</a></li>
</ul>
</li>

</ul>
</html>
CSS - - - - - - - - - - - - -




ul {
display: block;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
width: 75px;
position: absolute;
text-align: center;
height: 0px;
left: 50px;
top: 75px;
}
ul li {
display: block;
position: absolute;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
background-color: rgb(34,34,34);
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 18px;
z-index: 2;
text-align: center;
width: 75px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
height: 20px;
color: rgb(238,238,238);
top: -10px;
letter-spacing: 0.2em;
}
ul li:hover {
color: #6FF;
z-index: 2;
text-align: center;
position: absolute;
height: 40px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 75px;
}
ul li ul {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align: center;
margin-left: -150px;
height: 20px;
}
ul li ul li {
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
text-align: center;
height: 20px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
width: 75px;
}
ul li ul li:hover {
background-color: #DDD;
text-align: center;
display: block;
position: relative;
height: 20px;
width: 75px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
text-align: center;
height: 20px;
width: 75px;
left: 100px;
top: 25px;
position: relative;
}
 
Laatst bewerkt:
bedankt Plukkies!

Het werkt goed en is simpel.
Ik had eerder al zo'n <a href> erin geplaatst maar toen werkte het niet.., mogelijk iets over het hoofd gezien.

Maar de menu-items zijn nu gelinkt.

groeten Pellekaart
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan