Меню с Javascirpt част 2
10-01-2010
Здравейте,първо извинявайте за закъснението на втората част ама се наложи да преинсталирам.Днес ще довършим менюто което започнахме.
1.Първо се е нашият навигациoнен контейнер #navigation, Останалото е почти стандартни неща. В клас "nav_links a:hover” ще бъде нашата смяна, ние ще се създаде образ, че в моменти. Другите клас е ". Withdiv" Помните ли, когато написахме навигация ни в нашите HTML документ? Всички връзки добавите този клас добавя, с изключение на първия. Ако погледнете в Dreamweaver в "Design View", трябва да има нещо подобно.

2.Сега може да се наложи да променят ляво & дясно в ". Nav_links А" клас, ако е годна навигация в цялата 850pixels, това ще се дължи на някои думи е по-дълго от другите. Както можете да видите използва същия вид текст на всеки бутон, за да направи по-лесно. Сега да направим нашите бутон ховър, за да получите действителните размери взема печат екрана на вашия Design View в Dreamweaver, да го поставите в Photoshop и направете селекция като тази.

3.Сега си направете файл cumsom.js и в него поставете
$(function() {
// OPACITY OF BUTTON SET TO 100%
$(".nav_links a").css("opacity","1.0");

// ON MOUSE OVER
$(".nav_links a").hover(function () {

// SET OPACITY TO 30%
$(this).stop().animate({
opacity: 0.3
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
});
});

4.В страницата която ще е менюто задължително трябва да има този код
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>

Това беше от мен.Надявам се уроците да са ви харесали :)
DEMO!



/ Трябва да сте регистриран за да напишете коментар /
От: stoqnski
10:14 11-01-2010
Демото е това :) : http://hv-designs.co.uk/tutorials/jquery_nav/index.html
От: Emperator
18:12 25-02-2010
Имам проблем с урока незнайно защо ми праща текста най-горе в ляво а аз искам да е под менюто някой може ли да ми каже как да го оправя :)
1