2013-06-26 3 views
1

Я работаю над этой новой темой Wordpress, и теперь у меня есть следующий вопрос. Если вы посмотрите здесь: http://www.client-szs.nl/fatih, вы увидите главное меню. Если я нажму или наведите курсор, скажем, Блог, я хочу, чтобы фон ul изменился и полностью перешел к блогу слов. Это также относится к другим элементам в меню. Таким образом, у каждого li есть другое фоновая позиция ul. Я везде искал, но, похоже, не нашел хорошего решения.Изменение фона ul при зависании или действии li

Спасибо advange,

Bastiaan

+0

ничего действительно тяжелого, потому что я не знаю ни одного js или много php, поэтому в основном css/html, но это никогда не сработает. Я только что думал, искал и спрашивал друзей: D –

+0

http://jsbin.com/emexug/1/edit –

ответ

0

более простой способ, если вы хотите, просто использовать только CSS, см DEMO http://jsfiddle.net/yeyene/DZRUu/

Используйте эти CSS, ваше активное меню будет изменено как в DEMO.

.mainnav ul { 
    background:#D11F28; 
    background-position: -730px 0px; 
    background-repeat: no-repeat; 
    border: 0px solid; 
    min-height: 48px; 
    margin: 0px; 
    padding: 0px 8px 0px 8px; 
    width:100%; 
} 
.mainnav ul li { 
    font-family: 'Rokkitt', serif; 
    display: inline-block; 
    list-style-type: none; 
    font-size: 23px; 
    line-height: 30px; 
    padding:9px 5px; 
    width: auto; 
    margin-right: 3%; 
} 
.mainnav ul li a{ 
    text-decoration:none; 
    color:#fff;  
} 
.mainnav ul li.current_page_item a{ 
    text-decoration:none; 
    color:#D11F28;  
} 
.mainnav ul li.current_page_item{ 
    background:#F2F2F2;  
} 
+0

Возможно, это я, но я не понимаю, что вы имеете в виду здесь? Разве это не просто меняет ли фон? Мне нужно, чтобы изменить фон ul, когда li зависает и активируется. снова, может быть, я что-то пропустил: D –

+0

вы используете WP, правильно. И вы хотите переместить белый фон ul на любой ли активный, правый. Я предлагаю вместо этого перемещать фон ul (наклонный белый фон), использовать белый цвет css. (если вам нравится.) Поскольку вам нужно определить li активным, но ul не имеет активного состояния, только li имеет. Поэтому. – yeyene

+0

Ваш фон уль здесь ... http: //www.client-szs.nl/fatih/wp-content/themes/fatih1/images/mainnav_bg.png ... если вы переместите это, другое li (перед active li) будет на белом фоне. – yeyene

0

Вы можете сделать это с помощью JQuery:

$('li').hover(function() { //mouseover 
    $('ul').css('background', '#000'); 
}, function() { //mouseout 
    $('ul').css('background', '#fff'); 
}); 

Obs: Код не тестировалась.

+0

спасибо, я проверю! –