Дата публикации: 15.02.2023

Меню почти как у гугла Портал Zagru.ru

8bd108ae

Делать было нечего. Слепил меню почти как у гугла - демо Установка: 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> Естественно все ссылки и названия заменяем на свои. Готово!