Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.10.2013, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

kirian222,

Возможно ли такое на javascript
Ответить с цитированием
  #12 (permalink)  
Старый 16.10.2013, 21:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Там в css не .menu ul li, a .menu li
<!DOCTYPE html>
<ul class="menu">
<li><a href="/index">Главная</a></li> 
<li><a href="/index/uslugi/0-7">Услуги</a></li> 
<li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li> 
<li><a href="/index/contacts/0-6">Контакты</a></li> 
<li><a href="/index/zajavka/0-8">Оставить заявку</a></li> 
</ul> 
<div class="clear"></div>

<style>
menu, .menu ul {
padding : 0;
list-style : none;
}
.menu {
position : relative;
width : 994px;
height : 39px;
margin : 0 auto;
}
.menu a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}
.menu li.active,
.menu li a:hover {
background : #bba26c;
border-color : #888 #777 #bba26c #555;
color : #fff;
}

.menu a:hover ul li a {
line-height : 35px;
height : 35px;
float : none;
}
.menu ul li a {
background : #bba26c;
border-color : #888 #777 #444 #555;
border-radius : 0 0 0 0;
color : #000000;
line-height : 1px;
transition : 1.5s;
}
.menu ul {
position : absolute;
top : 37px;
left : 0;
height : 0;
overflow : hidden;
}
.menu li {
float : left;
position : relative;
background : transparent;
}
.menu li a {
width : 138px;
height : 37px;
margin-left : 3px;
background : #E6C98A;
border-radius : 6px 6px 0 0;
display : block;
text-align : center;
line-height : 35px;
border : #8a8686 solid 1px;
border-bottom-color : #fff;
color : #000000;
text-decoration : none;
font-size : 12px;
font-weight : bold;
transition : 0.6s;
}
.menu ul li {
width : 100%;
opacity : 0;
transition : 0.5s;
}
.menu li:hover ul li {
opacity : 1;
}
.menu li:hover ul li a {
line-height : 35px;
}
</style>
<script>
(function(){
    var links = document.querySelectorAll('.menu a');
    for (var i = 0, link; link = links[i]; i++) {
        if (link.href == document.URL)
            link.className += ' active';
    }
})()
</script>
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 16.10.2013 в 21:24.
Ответить с цитированием
  #13 (permalink)  
Старый 16.10.2013, 21:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

danik.js,
осталось выяснить что есть
Сообщение от danik.js
activeURL
Ответить с цитированием
  #14 (permalink)  
Старый 16.10.2013, 21:24
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от рони
осталось выяснить что есть
Это недонажатый пару раз Ctrl+Z
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #15 (permalink)  
Старый 17.10.2013, 02:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

kirian222

<style>
ul.menu li a{
 background-color : transparent;
 border-color : transparent;
 }
 ul.menu a.active,
 ul.menu a:hover {
 color: #fff!important;
 background-color : #bba26c!important;
 border-color : #888 #777 #bba26c #555!important;
 }
</style>
<ul class="menu">
 <li><a href="http://forumdts.org/search.php?action=show_24h">Главная</a></li> 
 <li><a href="/index/uslugi/0-7">Услуги</a></li> 
 <li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li> 
 <li><a href="/index/contacts/0-6">Контакты</a></li> 
 <li><a href="/index/zajavka/0-8">Оставить заявку</a></li> 
 </ul> 
 <div class="clear"></div>
<script>
(function(){
var links = document.querySelectorAll('.menu a');
for (var i = 0, link; link = links[i]; i++) {
 link.className = link.className.replace(/\s*active\s*/ig,'');
 //alert(link.href+'\n'+document.URL.split('#')[0]);
 if (link.href.split('#')[0] == document.URL.split('#')[0]){
    link.className += ' active';
 }
}
})()

Последний раз редактировалось Deff, 17.10.2013 в 03:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56
Выделение активного пункта меню blyskawka Javascript под браузер 2 28.10.2012 12:48
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 02:49
аккордеон, раскрытие активного пункта меню Moles jQuery 1 21.11.2011 13:24
Связь активного пункта меню с iframe dadada1916 Элементы интерфейса 2 13.12.2010 02:03