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


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

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