Помогни ни да направим Uroci.net по - богат! Добави урок

Меню с jQuery

miloshev   трудност:    видян: 34839

Като за начало свалете jquery-1.9.1.min.js от jquery.com/download/
Сложете го в папката където ще запишете файла, който ще направим.
Името на файла си го измислете вие с разширение hml,html и т.н.
Не съм обяснявал CSS-кода, т.к. това е урок за jQuery! 
<html>
<head>
<style>
a
{
display:block;
background-color:silver; 
color:white;
text-align:center;
text-decoration:none;
}
a:hover
{
background-color:gray;
color:black;
}
</style>
<script src="jquery-1.9.1.min.js"></script> <!--инсталиране на jQuery(задължително)-->
<script> 
$(document).ready(function(){ //създаваме функция
$("#menu1").hide(); //скриваме елементите с id=menu1
$("div").mouseenter(function(){ //...когато мишката мине през Меню
$("#menu1").show(1000); //всички елементи с id=menu1 се показват за 1 сек.(1000 милисекунди)
});
$("div").mouseleave(function(){ //когато мишката не е върху елементи с div...
$("#menu1").hide(1000); //...се скриват елементите за 1 сек.
});
});
</script>
</head>
<body>
<div style="width:100px;">
<a href="#.html">Меню</a>
<div id="menu1">
<a href="#.html">Опция 1</a>
<a href="#.html">Опция 2</a>
<a href="#.html">Опция 3</a>
</div>
</div>
</body>
</html>



Коментари (1)

miloshev на 15.07 2013 в 16:31ч.
DEMO:
http://pirintourist.net78.net/menu.html

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com