Хубаво падащо меню

CSS и HTML » CSS

mariyan951 трудност:

видян: 26439

Здравейте

Този урок е за по-напреднали. Трябва да си направите за няколко бутони:

а) начален изглеждащ бутон

б) когато се сложи мишката на него се появява друг бутон

в) падащия бутон

г) когато се сложи мишката на него се появява друг падащ бутон

Правите си Css документ и в него поставяте кода:

/* CSS Document /

body{
padding: 25px;
}

/^'^ Navigation Structure ^'^/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(снимка);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/^'^ Primary Items ^'^/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(снимка);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(снимка);
background-repeat: no-repeat;
background-position: center;
}

/^'^ Secondary Items Container ^'^/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(снимка);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/^'^ Secondary Items ^'^/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(снимка);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/^'^ Secondary Items Hover State ^'^/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(снимка);
background-repeat: no-repeat;
color:#CC0000;
}

/^'^ Secondary Item Titles ^'^/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/ background: url(снимка); /
background-repeat: no-repeat;
font-weight:bold;
}

/^'^ Horizontal Dividers ^'^/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;

}

И в Индекса поставяте кода:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="nav-container-outer">
<img src="images/nav-bg-l.jpg" alt="" class="float-left" />
<img src="images/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li></li>
<li><a class="item-primary" href="#">Products</a>

<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li></li>
<li><a class="item-primary" href="#">Quality</a>

<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li></li>
<li><a class="item-primary" href="#">Services</a>

<ul style="width:150px;">
<li>Title For Links</li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li></li>
<li>Title After Divider</li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li></li>
<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">
<li>Title For Links</li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li></li>
<li>Title After Divider</li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>

<ul style="width:150px;">
<li>Title For Links</li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li></li>
<li>Title After Divider</li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear"> </li></ul>
</div>
</body>
</html>

Това беше кода... дано да сам ви помогнал

Сподели урока:

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

tesa на 25.01 2010 в 15:08ч.

Нямаше да е зле да пишеш къде се слага "снимка - а)", къде се слага "снимка - б)", а не само както е "снимка", ама нищо.Mоже ли демо, да видя за какво става въпрос, ако ми върши работа, тогава да си размърдам мозъка и да го направя.Благодаря.

icefreak на 06.02 2010 в 21:44ч.

Само да ти кажа ,че първо това няма да работи в IE и какво е тва left:-10000px; ти знаеш ли колко много е това бе човер аз се занимавам от бая време с web десигн.По добре използвай java script

Claw на 25.08 2010 в 17:08ч.

-10000px знаеш ли защо е изобщо icefreak ?? целта на -10000 е да скрие от екрана нещо... макар 4е и -1000 пак ще свърши работа, в случая скрива мен';тата от екрана

koev на 10.09 2010 в 03:56ч.

Не е много удачно в уроци за CSS да учите начинаещите да ползват инлайн форматиране. Не за друго, но '90-те отдавна минаха. И това не бих го нарекъл точно урок - пейстнат от някъде код без никакво обяснение.

bokity на 08.01 2011 в 14:16ч.

хаха -3128937891273982179837198273981 пиксела ... display:none; ??

mart092 на 15.10 2011 в 20:17ч.

Проблема с IE идва от липсата на нещо много важно наречено DOCTYPE, като сложиш
над тага всичко се оправя. Все пак е наистина глупаво да използваш -10000px => dispay:none; е много по удачно.

html5 на 13.06 2012 в 09:54ч.

Защо не напишеш тогава след това започва истинският html

i t.n.
2ро цсс трябва да бъде в отделна папка и с
така при всяко зареждане на този хтмл документ ти използва и цсс като това ти изхабява много нерви и време.!