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

Меню с HTML и CSS

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

Нека разгледаме първо html кода:

<!-- При първия елемент няма нищо необичайно -->

<li><a href="#">Home</a></li>

<!-- Забележете, че при втория елемент затварящия таг не се намира след препратката, а едва след списъкът, който сме вмъкнали, т.е. вмъкваме списък в самия елемент и този списък ще го направим да не се вижда, докато не минем с мишката през елемента History-->

<li>

<a href="#">History</a>

<ul>

<li><a href="#">fdsfsad</a></li>

<li><a href="#">fdsfsdf</a></li>

<li><a href="#">fsdfsd</a></li>

</ul>

</li>

</ul>

нека сега "облечем" html кода:

<style>

/*даваме relative за списъците, защото искаме скритото подменю да започне непосредствено до самото меню (в случая от менюто History) */

ul li

{

position:relative;

}

/* задаваме на подменюто да бъде на растояние отляво 149, 0px отгоре (от където започва менюто), слагаме му display:none , за да не се вижда (първоначално) */

li ul

{

position:absolute;

top:0px;

left:170px;

display:none;

}

/* задаваме разстояние 0 и премахваме подчертаването */

ul

{

padding:0px;

margin:0px;

list-style-type:none;

}

/* правим така че невидимите елементи да станат видими едва когато минем с мишката през History */

li:hover ul

{

display:block;

}

/*създаваме блоков елемент, оформяме широчината, отстъпа и слагаме рамка*/

a

{

display:block;

width:150px;

padding:10px;

border:1px solid black;

}

/*правим така, че когато минаваме през препратка да се смени фона и цвета на текста*/

a:hover

{

background:silver;

color:white;

}

</style> 

надявам се урокът да ви е харесал. извинявам се, че няма демо. 



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


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини