Навигация в меню навигации Эффект только в определенном случае - PullRequest
0 голосов
/ 09 июня 2011

Мне нужен точный эффект навигационного меню этого сайта http://recruitmentmalta.com/ptowers/, но в более аккуратном коде.Этот код был создан с помощью инструмента, который конвертирует из PSD в HTML / CSS и в основном создал кучу бесполезного кода.Я знаю, как создать это меню, за исключением той части, в которой эффект Shop Now должен отключаться, только если контакт находится над ним.

Любые идеи о том, как воссоздать эффект зависания при наведении курсора накнопка контакта (когда Shop Now отключается)?

Это то, что я сделал до сих пор, чтобы дать вам идею

    <ul>
        <li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
        <li id="aboutButton"> <img src="images/about.png" onmouseout="this.src='images/about.png'" onmouseover="this.src='images/aboutHover.png'" width="115" height="55" alt="about" /></li>
        <li id="newsButton"> <img src="images/news.png" onmouseout="this.src='images/news.png'" onmouseover="this.src='images/newsHover.png'" width="115" height="55" alt="news" /></li>
        <li id="brandsButton"> <img src="images/brands.png" onmouseout="this.src='images/brands.png'" onmouseover="this.src='images/brandsHover.png'" width="115" height="55" alt="brands" /></li>
        <li id="storesButton"> <img src="images/stores.png" onmouseout="this.src='images/stores.png'" onmouseover="this.src='images/storesHover.png'" width="115" height="55" alt="stores" /></li>
        <li id="careersButton"> <img src="images/careers.png" onmouseout="this.src='images/careers.png'" onmouseover="this.src='images/careersHover.png'" width="115" height="55" alt="careers" /></li>
        <li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'"  width="115" height="55" alt="contact" /></li>
        <li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
    </ul>

Это моя JS Fiddle Link: http://jsfiddle.net/GHHJM/

Ответы [ 2 ]

1 голос
/ 09 июня 2011

Это не так сложно.

Создайте меню в элементе <ul>, как это принято сегодня. Создайте стиль, который называется hover, с рамкой, чтобы имитировать блики. Установите класс по умолчанию для последнего элемента (стиль при отображении страницы), чтобы он имел границу. Все остальное просто нормально для начинающих. Помните, что при работе со стилями вы можете «складывать» классы, такие как:

<element class="firstclass hover otherclass">

Теперь создайте действие при наведении: $("li").hover(function () { $(elementtoputborderon).addClass("hover"); }, function () { $(this).removeClass("hover"); })

И для той части, где он выключается: $("#idofcontactbtn").hover(function () { $('#idoflastelement').removeClass("hover"); }, function () { $('#idoflastelement').addClass("hover"); })

Чтобы получить эффект "затухания" на последнем элементе, вы можете попробовать что-то вроде этого:

$('#lastitem').hover(function() { $(this).toggleClass('pretty-hover', 500); });

0 голосов
/ 20 июня 2011

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>

<script  type='text/javascript'>
$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton).attr("src","images/shopNowHover.png");
    });
});
</script>

</head>

<body>

<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />

</body>
</html>

Однако это не работает в Firefox, есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...