» »

Меню почти как у GOOGLE


Меню почти как у GOOGLE

Делать было нечего. Слепил меню почти как у гугла, проверил все отлично работает сам код без ошибок. Стили отлично делают свое дело. Так можно сказать сто оно оригинальное так как сам его создал. Вам выбирать, ставить да оценивать мою работу.
Установка:
1)CSS:
Код

.knopka{  
background:#2d2d2d;  
padding:7px;  
display:inline-block;  
position:relative;  
z-index:9999999;  
border-right:1px solid #2d2d2d;  
border-left:1px solid #2d2d2d;  
color: #BBB;  
font-weight: bold;  
font-family: arial,sans-serif;  
font-size: 13px;  
left:29px;  
padding-right:9px;  
padding-left:9px;  
}  
body{  
margin:0;  
}  
.knopka:hover{  
color:black;  
background:white;  
cursor:pointer;  
border-right:1px solid #BEBEBE;  
}  
.drop{  
border-top:none;  
background:white;  
-webkit-box-shadow: 0 1px 2px #777;  
-moz-box-shadow: 0 1px 2px #777;  
box-shadow: 0 1px 2px #777;  
display:none;  
left:0;  
height:auto;  
width:120px;  
position:absolute;  
top:30px;  
z-index:1;  
}  
.knopka:hover .drop{  
display:inline;  
}  
.menu{  
color:black;  
padding:5px;  
padding-left:20px;  
}  
.menu:hover{  
background:#efefef;  
cursor:pointer;  
}  
.menu a{  
color:black;  
text-decoration:none;  
}  
.menu:hover a{  
background:#efefef;  
cursor:pointer;  
}  
.punkt{  
color: #BBB;  
font-weight: bold;  
font-family: arial,sans-serif;  
font-size: 13px;  
padding-left:10px;  
padding-right:10px;  
position:relative;  
left:34px;  
}  
.punkt:hover{  
color:white;  
cursor:pointer;  
}  
.punkt a{  
color: #BBB;  
text-decoration:none;  
}  
.punkt:hover a{  
color:white;  
cursor:pointer;  
}  
.gbma{  
position: relative;  
top: -1px;  
border-style: solid dashed dashed;  
border-color: transparent;  
border-top-color: silver;  
display: -moz-inline-box;  
display: inline-block;  
font-size: 0;  
height: 0;  
line-height: 0;  
width: 0;  
border-width: 3px 3px 0;  
padding-top: 1px;  
left: 4px;  
}  
.knopka:hover .gbma{  
position: relative;  
top: -1px;  
border-style: solid dashed dashed;  
border-color: transparent;  
border-top-color: black;  
display: -moz-inline-box;  
display: inline-block;  
font-size: 0;  
height: 0;  
line-height: 0;  
width: 0;  
border-width: 3px 3px 0;  
padding-top: 1px;  
left: 4px;  
}  
.panel{  
width:100%;  
background:#2d2d2d;  
height:30px;  
-webkit-box-shadow:0 0 5px #777;  
-moz-box-shadow:0 0 5px #777;  
box-shadow:0 0 5px #777;  
border-bottom:1px solid black;  
position:fixed;  
z-index:999;  
}

2)HTML:
Код
<div class="panel">  
<span class="punkt"><a href="#">+Вы</a></span><span class="punkt"><a href="#">Поиск</a></span><span class="punkt"><a href="#">Картинки</a></span><span class="punkt"><a href="#">Карты</a></span><span class="punkt"><a href="#">Play</a></span><span class="punkt"><a href="#">YouTube</a></span><span class="punkt"><a href="#">Новости</a></span><span class="punkt"><a href="#">Почта</a></span><span class="punkt"><a href="#">Документы</a></span><span class="punkt"><a href="#">Календарь</a></span>  
<div class="knopka">Ещё<span class="gbma"></span><div class="drop" style=""><div style="margin-top:10px;"><div class="menu"><a href="#">Переводчик</a></div><div class="menu"><a href="#">Blogger</a></div><div class="menu"><a href="#">Reader</a></div><div class="menu"><a href="#">Фотографии</a></div><div class="menu" style="margin-bottom:10px;"><a href="#">Видео</a></div><div style="border-top:1px solid #ccc;"><div class="menu" style="margin-top:10px;margin-bottom:10px;"><a href="#">Все сервисы</a></div></div></div></div></div></div>
04.08.2012 Просмотров: 1969 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
avatar
demon4ik3786 27.12.2014 20:411
0
забрал
avatar