Красивое выдвигающиеся меню в шапке by webo4ka.ru

679
10 из 10
Проголосовало: 1






У Вас мало место на сайте? Не знаете как влепить профиль и поиск на сайт, чтобы было компактно и красиво? Тогда данное выдвигающееся меню в шапке как раз для Вас... Это можно сказать вторая шапка, которая красиво впишется в дизайн сайта. В данном меню помимо профиля и поиска как писалось выше, есть еще информационный блок, в котором можно писать новости сайта или размещать рекламу...

Верстку данного меню хотел заказать пользователь Max3764, но он молчит уже дней пять, (наверно денег нету), ну раз я сверстал, то можно уже и пополнить сайт новым материалом, не пропадать же верстке))

В архиве будет лежать демо, код и все картинки к материалу!

Код
<div class="aWebo4kaRu">
<div class="bWebo4kaRu">
<div class="cWebo4kaRu">
<div class="avaWebo4kaRu"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://webo4ka.3dn.ru/webo4kaRu/img/noavatarWebo4kaRu.png"><?endif?></div>
<div class="ccilkiWebo4kaRu">
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
</div>

<div class="novostiWebo4kaRu">Важные новости:
<br> 1. Важная новость 1(max 20 символ)
<br> 2. Важная новость 2(max 20 символ)
<br> 3. Важная новость 3(max 20 символ)
</div>

<div class="poiskWebo4kaRu">
<form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">
<input type="text" name="q" id="searchWebo4kaRu" onfocus="if(this.value=='Введите фразу для поиска')this.value='';" onblur="if(this.value=='')this.value='Введите фразу для поиска';" value="Введите фразу для поиска" autocomplete="off" />
<input type="submit" name="sfSbm" id="naitiWebo4kaRu" value=""/>
</form>
<span>Например: Вёрстка by Вовчик</span>
</div>

<div class="cvernutWebo4kaRu"><a href="javascript://" onclick="cver();" id="cvWebo4kaRu" style="display:none;">Свернуть панель</a> <a href="javascript://" onclick="razv();" id="rzWebo4kaRu">Развернуть панель</a></div>

<script>
function cver() {$('.bWebo4kaRu').animate({marginTop: "0px"}, 2000); $('#cvWebo4kaRu').hide(); $('#rzWebo4kaRu').show();}
function razv() {$('.bWebo4kaRu').animate({marginTop: "77px"}, 2000); $('#rzWebo4kaRu').hide(); $('#cvWebo4kaRu').show();}
</script>
</div>
</div>
</div>

<style>
.aWebo4kaRu {width:966px; margin: 0px auto;}
.bWebo4kaRu {background: url('imgWebo4kaRu/fon.png') 0px 0px no-repeat; width:966px; height:108px; position:fixed; top:-77px; z-index:9999;}
.cWebo4kaRu {margin:3px 0px 0px 5px;}
.avaWebo4kaRu {background: url('imgWebo4kaRu/fonava.png') 0px 0px no-repeat; width:73px; height:69px;float:left;}

.avaWebo4kaRu img {width:73px; height:69px;}
.ccilkiWebo4kaRu {float:left;}
.ccilkaWebo4kaRu {background: url('imgWebo4kaRu/moj_profil.png') 0px 0px no-repeat; border:none; width:145px; height:19px; text-align:center; padding-top:4px;}
.ccilkaWebo4kaRu a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;}
.ccilkaWebo4kaRu a:hover {color:#eee;}

.novostiWebo4kaRu {background: url('imgWebo4kaRu/info.png') 0px 0px no-repeat; width:193px; height:66px;float:left; padding:3px 7px; margin-left:159px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; line-height: 1.4;}

.poiskWebo4kaRu {float:right; margin:15px 40px 0px 0px;}
#searchWebo4kaRu {background: url('imgWebo4kaRu/poisk.png') 0px 0px no-repeat; border:none; width:167px; height:32px; padding:0px 15px 4px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; margin:0px; outline:none;}
#naitiWebo4kaRu {background: url('imgWebo4kaRu/ishhi.png') 0px 0px no-repeat; border:none; width:45px; height:30px; padding:0px 15px 4px 10px; margin-left:4px;}
#naitiWebo4kaRu:hover {background: url('imgWebo4kaRu/ishhi.png') 0px -30px no-repeat; border:none; width:45px; height:30px; padding:0px 15px 4px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:12px; cursor:pointer;}

.poiskWebo4kaRu span {margin:10px 0px 0px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:10px;}

.cvernutWebo4kaRu {float:right; margin:23px 118px 0px 0px;}
.cvernutWebo4kaRu a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;}
.cvernutWebo4kaRu a:hover {color:#eee;}
/*-- by webo4ka.ru --*/
</style>


На этом установка окончена, если что-то не так, пишите в комментариях...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта 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
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: