Just nu i M3-nätverket
Jump to content

CSS Menu med java?


Amazonite

Recommended Posts

Har en menu gjord med css som funkar perfekt bara ett litet problem. Har lagt till funktionen hover så att det blir blå bakgrund på knappen man har musen på. Problemet är den att jag inte kan komma på ett sätt att behålla blå bakgrund när man trycker på någon av knapparna. Kan lägga till i <li> taggen id="highlight" och då får jag blå bakgrund på den knappen där jag har skrivit in det attributet men den är peramnent och försvinner inte om man trycker på någon av de andra knapparna. Har gjort en cssmeny förut och fixat en slags current på den knappen man trycker på. Problemet här är att jag jobbar med frames och att varje sida ändras för sig...

HTML:

<div class="menu bubplastic horizontal blue">

<ul>

<li><a href="Main.php" target="main"><span class="menu_ar">Nyheter</span></a></li>

<li><a href="DjSzcz.html" target="main"><span class="menu_ar">Dj Szcz</span></a></li>

<li><a href="Musik.html" target="main"><span class="menu_ar">Musik</span></a></li>

<li><a href="Media.html" target="main"><span class="menu_ar">Media</span></a></li>

<li><a href="Kontakt.html" target="main"><span class="menu_ar">Kontakt</span></a></li>

</ul>

<br class="clearit"/>

</div>

 

CSS:

.clearit {

margin: 0;

padding: 0;

height: 0;

clear: both;

}

.bubplastic.horizontal {

position: absolute;

width: 100%;

height: 27px;

margin: 0;

padding: 0;

bottom: 0;

left: 0;

z-index: 1;

background: transparent url(images/bg-bubplastic.gif) top left repeat-x;

}

.bubplastic.horizontal ul {

position: absolute;

list-style: none;

margin: 0;

padding: 0;

}

.bubplastic.horizontal ul li {

float: left;

margin: 0;

padding: 0;

background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;

}

.bubplastic.horizontal ul li a {

display: block;

height: 27px;

padding-left: 55px;

float: left;

text-transform: uppercase;

font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;

font-size: 80%;

color: #FFFFFF;

text-decoration: none;

}

.bubplastic.horizontal ul li a span.menu_ar {

display: block;

float: left;

height: 22px;

padding-top: 5px;

padding-right: 54px;

background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;

cursor: pointer;

}

.bubplastic.blue ul li a:hover,

.bubplastic.blue ul li#highlight a {

background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;

}

.bubplastic.blue ul li a:hover span.menu_ar,

.bubplastic.blue ul li#highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;

}

Link to comment
Share on other sites

  • 2 months later...

Först, det heter javascript och inte Java. Två helt olika språk!

 

Till ditt problem skulle jag rekommendera att använda jQuery (http://jquery.com/).

Lägg detta i head taggen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Och sen i en annan script tag skriver du något liknande

$(document).ready(function(){
  $('.bubplastic.blue ul li a').click(function(){
     $(this).siblings().css('background', 'transparent url(images/bg-bubplastic-button.gif) top right no-repeat');
     $(this).css('background', 'transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat');
  });
});

Har inte testat ovanstående kod, men något i den stilen borde fungera.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...