Красивая шапка для сайта с меню - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1107
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Шапки для сайта

Красивая шапка для сайта с меню

Хочешь сказать спасибо? Кликни на рекламный баннер.

16.06.2014, 21:01
Красивая шапка для сайта с живым прудом. Так же если у пользователя отключен флеш то он увидит обычную картинку заглушку. В шапке присутствует простенькое меню.
Итак Давайте приступим к установке :

Это в Ваш CSS :
Код
#top-menu { font-size:0.8em; padding: 2px 0 2px 20px; margin: 0; list-style-type: none; overflow: hidden; zoom:1;}
#header { height: 300px; width:100%;position: relative; background: url(http://megascripts.ru/demo/shapka-prud/header.jpg) no-repeat right; z-index:0; }

#header {height:350px;position: relative; background: url(http://megascripts.ru/demo/shapka-prud/header.jpg) no-repeat center; z-index:0;overflow:hidden;}
#header #flash-head{
  /*height: 350px;
  position: relative;
  top: 0;  
  width: 100%;*/  
  height: 87px;
/*margin: 0 auto;*/
  left:240px;
  margin: 0 auto;
  position: relative;
  top: 265px;
  width: 792px;
  z-index: 2000 !important;}

#header #flash-head table{ width:100%; margin-top:150px;}

#header #flash-head table td{ text-align:center;}

#header table { width: 80%; height: 77px;}
#header td { padding: 0; vertical-align: middle; text-align: left;}

div#logo { left: 15px; position: absolute; top: 10px; z-index: 1;}
div#logo a { text-decoration: none; font-size:1.2em;}
div#slogan { position:absolute; left:180px; top:10px; font-style: italic; z-index:1; text-align:center; }
div#slogan h1 { font-size: 1.1em; font-style: italic; color:#2e3092;}

div#phonesHeader { position:absolute; right:50px; top:10px; font-size: 1.1em; z-index:1; text-align:center; color:#0000ff;}

#top-menu { background-color:#fff;}
#top-menu { padding-left: 20px; margin: 0; list-style-type: none; overflow: hidden; zoom:1;}
#top-menu li { float:left; margin: 0; }
#top-menu a {
  display: inline-block;  
  text-decoration: none;  
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  outline: none;
  height:30px;
  padding: 2px 16px 2px;  
  line-height:30px;
  margin: 0;}

#top-menu li.selected a { padding: 2px 16px 2px; margin: 0;}
#top-menu li.selected .r1 { border-left: 1px solid; border-right: 1px solid; }
#top-menu li.selected .r0 { border-left: 1px solid; border-right: 1px solid; }

* html #top-menu .r1 { width: 2px;}
* html #top-menu .r0 { width: 2px;}

#top-menu li.selected .r1 { width: expression(runtimeStyle.width = parentNode.offsetWidth - 4 + 'px'); }
#top-menu li.selected .r0 { width: expression(runtimeStyle.width = parentNode.offsetWidth - 2 + 'px'); }

#top-menu a {color: #000; }
#top-menu a:hover { background: #fc8800; }
#top-menu li.selected a { color: #000; background: #f0d84d; border-color: #f0d84d; }
#top-menu li.selected b { background: #f0d84d;}
#top-menu li.selected .r1 { border-color: #f0d84d;}
#top-menu li.selected .r0 { border-color: #f0d84d;}


Это разметка самой шапки :
Код
<div id="header">
<div id="logo">
<a href="/" title="На главную страницу"><div align="center"><img src="http://megascripts.ru/demo/shapka-prud/logo.png" width="149" height="130"/></div>
</a></div>
<div id="slogan"><h1>описание сайта,<br>описание сайта,
описание сайта,
описание сайта.</h1></div>
<div id="phonesHeader"><font color="#FF0000" size="4"><b>+1 (234) 567-89-10<br/>+1 (234) 567-89-10</b></font></div>
   
<div id="flash-head">  
<object height="87" align="middle" width="792" id="02" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0">
<param value="http://megascripts.ru/demo/shapka-prud/prud.swf" name="movie">
<param value="autohigh" name="quality">
<param value="transparent" name="bgcolor">
<param value="true" name="play">
<param value="true" name="loop">
<param value="transparent" name="wmode">
<param value="showall" name="scale">
<param value="false" name="menu">
<param value="false" name="devicefont">
<param value="middle" name="align">
<param value="sameDomain" name="allowScriptAccess">
<!--[if !IE]>-->
<object height="87" width="792" data="http://megascripts.ru/demo/shapka-prud/prud.swf" type="application/x-shockwave-flash">
<param value="prud.swf" name="movie">
<param value="autohigh" name="quality">
<param value="transparent" name="bgcolor">
<param value="true" name="play">
<param value="true" name="loop">
<param value="transparent" name="wmode">
<param value="exactfit" name="scale">
<param value="true" name="menu">
<param value="false" name="devicefont">
<param value="middle" name="align">
<param value="sameDomain" name="allowScriptAccess">
<!--<![endif]-->
<table>
<tr>
<td align="center">
<a href="http://www.adobe.com/go/getflash"><img alt="Get Adobe Flash player" src="http://megascripts.ru/demo/shapka-prud/get_flash_player.gif"></a>
</td>
</tr>
</table>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>  
</div>  
</div>
   
<ul id="top-menu">
<li class="selected"><a href="/"><img src="http://megascripts.ru/demo/shapka-prud/home.gif"/> Главная</a></li>
<li><a href="/">О компании</a></li>
<li><a href="/">Продукция</a></li>
<li><a href="/">Услуги</a></li>
<li><a href="/">Новости</a></li>
<li><a href="/">Вопросы</a></li>
<li><a href="/">Доставка</a></li>
<li><a href="/">Вакансии</a></li>
<li><a href="/">Контакты</a></li>
</ul>


Все используемые стили и картинки находятся в архиве.
Вот и всё. Удачи Вам smile





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 6501 | Загрузок: 458 | Рейтинг: 2.7/11
Теги: скрипт, шапка для сайта, Шапка, шапка для ucoz, красивая шапка
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

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


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта