ZorNet.Ru — сайт для вебмастера » Меню для сайта » Меню почти как у GOOGLE

Меню почти как у 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 Августа 2012 Просмотров: 2951 Комментариев: (1)

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

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

Оставь свой отзыв

Комментарии: 1
noavatar
demon4ik3786 27 Декабря 2014 20:411
0
забрал
avatar