HTML & CSSur HTML, XHTML & CSS
5 svar · 465 visningar · startad av Matsakii
Har en gammal sajt där en av menyerna ser ut som på bilden. Jag skulle vilja ha ungefär samma bilder/knappar men lägga på en dropdown/undersidor på dom.
Jobbar i Dreanweaver och undrar vilken metod som skulle funka bäst? Droppdown behöver inte innehålla bilder. Jag är inge duktig på javascript eller jquery tex. och vill inte ha flash.
Några bra tips? Kanske DHTML eller nått? eller ännu bättre en plugg till DW :)
Thanks!
Det går att göra enbart i css också om du vill, är inte alldeles för svårt. Är också mycket enkelt att göra i jQuery. Men som grundstruktur så föreslår jag att du skapar en punktlista (som du förstås stylar om). Sen lägger du in ett event, antingen i css eller jQuery som säger att den ska visa alla undergrupper till punklistan.
Återkommer om några minuter med exempel.
Tack. Glömde lägga upp bilden på menyn :) Är det svårt att behålla rollover effekten när man kör med jquery och CSS?
Är lite småtrött just nu så har inte riktigt orkat få ihop ett fint fungerande exempel i css, utan bara så att du förstår principen hur man gör, fint får du göra själv ;)
<html>
<head>
<style>
#dropdown
{
margin: 5px;
padding: 0;
}
#dropdown li
{
float: left;
list-style: none;
position: relative;
height: 22px;
top: 0px;
}
#dropdown li:hover
{
position: relative;
background-color: white;
}
#dropdown ul
{
display: none;
top: 100%;
}
#dropdown li:hover ul
{
display: inline;
}
</style></head>
<body>
<ul id="dropdown">
<li>Hej
<ul>
<li>Hej 2</li>
<li>Hej 2</li>
</ul>
</li>
<li>Hej</li>
<li>Hej</li>
</ul>
</div>
</body>
</html>
Är egentligen enklare med jQuery, enligt mig iallafall.
Här kommer ett till principvisande exempel (återigen inte stylat eller något som helst, bara för dig att förstå hur du ska göra):
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#dropdown li').hover(function(){
$('ul',this).css('visibility','visible');
},function(){
$('ul',this).css('visibility','hidden');
});
});
</script>
<style>
#dropdown ul{
visibility: hidden;
}
</style>
<body>
<ul id="dropdown">
<li>Hej
<ul>
<li>Hej 2</li>
<li>Hej 2</li>
</ul>
</li>
<li>Hej</li>
<li>Hej</li>
</ul></body>
</html>
Tackar. Ska kolla lite på den.