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


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

1247
7.4 из 10
Проголосовало: 3






Делать было нечего. Слепил меню почти как у гугла - демо

Установка:
1)CSS:
Code

.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:
Code

<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>


Естественно все ссылки и названия заменяем на свои.

Готово!
Автор публикации: Загрузка
Загрузка
Supermenыч, это его n материал
  • Всего комментариев: 8

Kurbik
0
Kurbik написал: Написано 21 Июня 2012 в 11:18
Комментарий №8
извините там все ок просто я не правильно скопировал

Kurbik
0
Kurbik написал: Написано 21 Июня 2012 в 11:13
Комментарий №7
А нельзя сделать что бы когда сайт вниз листал меню оставалось

ErIcSSon
+1
ErIcSSon написал: Написано 01 Июня 2012 в 21:55
Комментарий №5
ПОЧТИ?? это есть меню гуугла

Supermenыч
0
Supermenыч написал: Написано 01 Июня 2012 в 22:07
Комментарий №6
ну отличия ведь есть smile

Supermenыч
+3
Supermenыч написал: Написано 01 Июня 2012 в 20:14
Комментарий №4
кстати вот css, чтобы цвет у ссылок плавно изменялся:
Code

.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;
opacity:0
}
.knopka:hover .drop{
display:inline;
opacity:1;
}
.menu{
color:black;
padding:5px;
padding-left:20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
.menu:hover{
background:#efefef;
cursor:pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
.menu a{
color:black;
text-decoration:none;
}
.menu:hover a{
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;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
.punkt:hover{
color:white;
cursor:pointer;
}
.punkt a{
color: #BBB;
text-decoration:none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
.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;
}

Maestro
+2
Maestro написал: Написано 01 Июня 2012 в 20:00
Комментарий №3
Классное меню, даже лучше чем у гугла

Kostyan
+1
Kostyan написал: Написано 01 Июня 2012 в 19:01
Комментарий №1
Всё супер happy
Красиво...Очень похожа на Google biggrin
Красиво было бы если сделал обводку у меню "Ещё"

Supermenыч
+2
Supermenыч написал: Написано 01 Июня 2012 в 19:06
Комментарий №2
я пробовал, но как-то тупо получается, поэтому сделал одну тень, без обводки smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: