CSS Active для панели раздвижных дверей - PullRequest
Новая
       46

CSS Active для панели раздвижных дверей

0 голосов
/ 11 марта 2012

Я строил навигационное меню раздвижных дверей CSS, которое меняется и прекрасно работает, когда я нахожу над вкладками, но я также хочу, чтобы оно менялось, когда ссылки активны, но я не могу получить активные правила работать в моем CSS. Если у кого-то есть какие-либо предложения по решению, я был бы очень признателен!

Это код CSS: 

 .menu {
 position: absolute;
 float: left;
 color: #1e1e1e;
 width: 1000px;
 font-size:17px;
 margin-left: -35px;
 z-index: 2;
 }

 .menu ul {
 list-style-type: none;
 margin-top: 136px;
 position: absolute;
 color:#1e1e1e;
 margin-left: -5px;
 }

 .menu ul li {
 float: left;
 position: relative;
 padding-right: 0px;

 }

 .menu ul li a {
 text-align: left;
 display:block;
 text-decoration:none;
 color:#1e1e1e;
 text-align: right;
 }


 .menu ul li a:hover {
 color: #ffffff;
 text-decoration: bold;
 }


 .menu ul li ul {
 color: #ffffff;
 text-decoration: bold;
 }

 .menu ul li:hover ul {
 display: block;
 position: absolute;
 margin-top: 8px;
 text-decoration:bold;
 color: #ffffff;
 }

 .menu ul li:hover ul li a {
 display:block;
 background:#000000;
 color:#ffffff;
 width: 100px;
 text-align: left;
 text-decoration:bold;
 }

 .menu ul li:hover ul li a:hover {
 background:#000000;
 color:#fff;
 text-decoration:bold;

 }

.home span {
background: transparent url('images/home.gif') no-repeat top left; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;

}

.home:hover span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.home:active span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.necklaces span {
background: transparent url('images/necklaces.gif') no-repeat top left; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;

 }

.necklaces:hover span {
background: transparent url('images/necklaces.gif') no-repeat top right;  
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

.necklaces:active span {
background: transparent url('images/necklaces.gif') no-repeat top right; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

<!--.....................................-->

<!--This is the HTML code -->


<div class="menu" float="left">
<ul>


<li class="home">
<a href="http://html-link"><span>.</span></a>
</li>


<li class="necklaces">
<a href="http://html-link"><span>.</span></a>
</li>


</ul></div>`}

1 Ответ

2 голосов
/ 11 марта 2012

Вот ссылка на статью, в которой показано 3 способа решения проблемы выделения активной ссылки:

3 способа выделения ссылок на текущую страницу с помощью CSS

Лично я использую jQuery, чтобы выделить активную ссылку.

Надеюсь, это поможет вам решить вашу проблему.

...