Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

button style

jan01

Startad av jan01,
i Webbutveckling

Rekommendera Poster

jan01

jan01

Postad
Postad

Hej!

Jag ska göra css-meny. Jag tror att min kod fungerar. Men hur kan jag bytta färg på en knapp när jag trycker på knappen och jag vill behålla färgen på den här knappen tills jag trycker på någon annan knapp.

 

Till ex: mina knappar har blå färg men när jag trycker på knappen (produkt) ska färgen byttas till röd färg och röd färgen ska byttas tillbaka till blå färg när jag trycker på någon annan knapp(miljö).

 

<html>
<head>

<style type="text/css">
/* --------------- button ---------------------*/
.myMenu{
position:absolute;
top:80px;
left:0px;
font-family: Verdana, Arial, Helvetica;
font-size:12px;
font-weight:bold;

}

#button1{
width:920px;
height:30px;

background-color:#A3ADB8;

}


#button1 ul
{margin:0px; 
padding:5px;

}

#button1 ul li{
display:inline; 
height:30px; 
float:left; 
list-style:none;
margin-left:133px; 
position:relative;
}


#button1 li a
{color:#fff; text-decoration:none;}

#button1 li a:hover
{text-decoration:underline;
color:#fff;
background-color:#000;
}


</style>

</head>

<body>
<div class="myMenu">

<div id="button1">
       <ul>
           <li>
           <a href="C:\">Hem</a>

           </li>

           <li>
           <a href="C:\">Produkt</a>

           </li>

           <li>
           <a href="C:\">Miljö</a>

           </li>

           <li>
           <a href="C:\">Fakta</a>

           </li>
            <li>
           <a href="C:\">Kontakt</a>

           </li>
       </ul>
   </div>
  </div>
</body>

</html>

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

Man kan använda sig av pseudo-selektorerna :active eller :focus

 

#button1 li a:active, #button1 li a:focus {background-color:red}

 

Om det inte duger kan man mha javascript lägga till en cssklass som har egenskapen med en bakgrundsfärg, sedan klickar man på en knapp ser den till att ta bort klassen från alla knappar och lägger till klassen på den knapp som klickades på.

 

Förresten #Button1 är ett dumt namn på div-elementet. För det första är det inte en knapp, för det andra är det missvisande, det borde beskriva vad elementet är för något.

 

Egentligen behöver du inte ett id på just det elementet, du kan använda dig av ".myMenu ul li a" istället

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...