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

1294
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    255
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: