Меню - Блог - Веб-студия IPC : Одесса : Создание и продвижение сайтов

Горизонтальное меню с круглыми иконками

Представляем вниманию вебмастерам, которые желают преобразовать свой ресурс оригинальное, горизонтальное меню с круглыми иконками.
Для того чтобы именно данное меню отображалось у вас, необходимо скачать сами иконки и залить к себе на сайт через файловый менеджер заменив потом в коде на свои в верхней части сайта и добавить этот код непосредственно на сайт.

затем в стили (css) добавить

СКАЧАТЬ АРХИВ

Категория: Меню | Просмотров: 551 | Добавил: RedStar | Дата: 18.08.2015 | Комментарии (0)

Красивое меню сайта для ucoz

Красивое меню сайта для ucoz

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

Установка:
Такие по фактуре меню нужен блок сайта, значит мы прописываем этот код в нем.

Этот стиль в CSS в самый низ:

Категория: Меню | Просмотров: 502 | Добавил: RedStar | Дата: 13.12.2014 | Комментарии (0)

Вертикальное меню в серых тонах для ucoz

Вертикальное меню в серых тонах для ucoz

Вертикальное меню в серых тонах для ucoz. Представляю Вашему вниманию красивое вертикальное меню, которое подойдет под сайты с темными шаблонами.

Установка:

1. В CSS вставляем:

Код

/* Menu by uSite.su - domenik */
  .menu-tab span {
  display:inline-block;
  font-family:sans-serif;
  font-weight:bold;
  font-size:12px;
  padding-left:6px;
  padding-top:10px;
  color:#fff;
  text-shadow:0px 1px 0px #282828;
  }
  .menu-ma {
  border:1px solid #282828;
  width:239px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  border-bottom:0px;
  }
  a.menu-tab:link {
  border-bottom:1px solid #282828;
  display:block;
  text-decoration:none;
  width:239px;
  height:34px;
  background:url('http://usite.su/images/menu-tab.png');
  }
  a.menu-tab:visited {
  border-bottom:1px solid #282828;
  display:block;
  text-decoration:none;
  width:239px;
  height:34px;
  background:url('http://usite.su/images/menu-tab.png');
  }
  a.menu-tab:hover {
  border-bottom:1px solid #282828;
  display:block;
  text-decoration:none;
  width:239px;
  height:34px;
  background:url('http://usite.su/images/menu-tab.png') 0px 68px;
  }
  a.menu-tab:active {
  border-bottom:1px solid #282828;
  display:block;
  text-decoration:none;
  width:239px;
  height:34px;
  background:url('http://usite.su/images/menu-tab.png') 0px 34px;
  }

/* ------------------ */

2. Туда где хотим видеть меню:

Код

<div class="menu-ma">
  <a href="http://manucoz.ru/" class="menu-tab"><span>Проверка меню</span></a>
  <a href="http://manucoz.ru/" class="menu-tab"><span>Вышло не по</span></a>
  <a href="http://manucoz.ru/" class="menu-tab"><span>by domenik</span></a>
  <a href="http://manucoz.ru/" class="menu-tab"><span>for manucoz.ru</span></a>
  </div>

Категория: Меню | Просмотров: 516 | Добавил: RedStar | Дата: 04.12.2014 | Комментарии (0)

Набор разноцветных меню для сайтов

Набор разноцветных меню для сайтов

Скопируйте содержимое поля CSS в таблицу стилей Вашего сайта,если у Вас сайт в системе uCoz,измените значение margin-top,свойство находится в верхней части кода CSS на 30px,для места под админ панель.Установите пути для пунктов меню и установите код там где хотите видеть меню.Если у Вас возникли вопросы по настройке кода меню - опишите их в комментариях к материалу.

Javascript (для всех цветов меню):

Код

Для КРАСНОГО меню вставляем в любое место HTML-страницы:

Код

<ul id="menu_wrap" class="Red"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>

Для КРАСНОГО меню вставляем в CSS

Код

body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Red,.Red .button a{color:#faddde;background: #ed1c24;border-right:solid 1px #aa1317;background: -moz-linear-gradient(top, #ed1c24 0%, #aa1317 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed1c24), color-stop(100%,#aa1317));background: -webkit-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -o-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -ms-linear-gradient(top, #ed1c24 0%,#aa1317 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#aa1317',GradientType=0 );background: linear-gradient(top, #ed1c24 0%,#aa1317 100%);}.Red .button a:hover,.Red .button a:focus{background: #c9151b;background: -moz-linear-gradient(top, #c9151b 0%, #a11115 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9151b), color-stop(100%,#a11115));background: -webkit-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -o-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -ms-linear-gradient(top, #c9151b 0%,#a11115 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9151b', endColorstr='#a11115',GradientType=0 );background: linear-gradient(top, #c9151b 0%,#a11115 100%);}.Red .button a:active{color:#de898c;background: #aa1317;background: -moz-linear-gradient(top, #aa1317 0%, #ed1c24 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aa1317), color-stop(100%,#ed1c24));background: -webkit-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -o-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -ms-linear-gradient(top, #aa1317 0%,#ed1c24 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa1317', endColorstr='#ed1c24',GradientType=0 );background: linear-gradient(top, #aa1317 0%,#ed1c24 100%);}домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: 1px inset 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45 градусов);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}

Категория: Меню | Просмотров: 580 | Добавил: master | Дата: 13.09.2014 | Комментарии (0)

Скрипт красивого, раздвижного фото меню

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

Код

Категория: Меню | Просмотров: 587 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)

Раздвижное меню для ucoz

Раздвижное меню для ucoz

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

Установка:

1. Копируем код и вставляем в CSS:

Код

a:focus, a:hover {
color : #7dbc00;
}

a {
color : #fff;
text-decoration : none;
}

#navigation {
margin-bottom : 5px;
}

.subnav {
color : #d1d1d1;
text-align:center;
}

.navhead, .navhead_blank {
width:100%;
text-align:center;
height:21px;
padding-top:3px;
background:url('http://wallaby.ucoz.ru/menu/greenrep.png') 0 0 repeat-x;
border:1px solid #7dbc00;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:5px;
}

.selected {
  background:url('http://wallaby.ucoz.ru/menu/whiterep.png') 0 0 repeat-x;
border:1px solid #e8e8e8;

font-weight:bold;
}

.selected span {
color:#000!important;
}

.navhead {
cursor : pointer;
}

.submenu {

width:100%;
margin : 0;
padding : 0;
list-style : none;
margin-bottom:20px;
}

.submenu li {
margin:0 auto;
width : 95%;

}

.submenu li a {
width:100%;
display : block;
color : #ccc;
padding-top : 3px;
height : 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#111;
margin-bottom:3px;
border:1px solid #222;
}

.submenu li a:hover {
color : #fff;
background:#222;
border:1px solid #333;
}

2. Вставляем в любой блок на сайте(туда, где хотим видеть раздвижное меню для ucoz):

Код

<div id="navigation">
  <div class="sidenav">
  <div class="navhead_blank"><span><a href="#" title="">Главная страница</a></span></div>
  <div class="navhead selected"><span>Меню 1</span></div>
  <div style="display: block;" class="subnav">

  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  <li><a href="#" title="">Ссылка 4</a></li>
  </ul>
  </div>

  <div class="navhead"><span>Меню 2</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  </ul>

  </div>
  <div class="navhead"><span>Меню 3</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>

  <li><a href="#" title="">Ссылка 4</a></li>
  </ul>
  </div>
  <div class="navhead"><span>Меню 4</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">
  <li><a href="#" title="">Ссылка 1</a></li>

  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="#" title="">Ссылка 3</a></li>
  </ul>
  </div>
  <div class="navhead"><span>Меню 5</span></div>
  <div style="display: none;" class="subnav">
  <ul class="submenu">

  <li><a href="#" title="">Ссылка 1</a></li>
  <li><a href="#" title="">Ссылка 2</a></li>
  <li><a href="http://tpl.if.ua" title="">Ссылка 3</a></li>
  </ul>
  </div>
  </div>
  </div>

3. Перед </head> на каждой странице:

Код

Категория: Меню | Просмотров: 471 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Раздвижное меню для ucoz

Раздвижное меню для ucoz

Шикарное раздвижное меню для ucoz в тёмных тонах. Данное вертикальное меню для ucoz просто находка, мне очень понравилась его простота и элегантность, не всегда эти качества сочитаються. Меню ucoz полностью рабочие(проверял 14.02.11), картинки качать ненужно.
Меню для ucoz
Установка скрипта для ucoz меню очень просто, забрасывайте код "меню для ucoz" в ваш блок на сайте, все)

Код

<link rel="stylesheet" type="text/css" href="http://wallaby.ucoz.ru/css_templates/menus.css" />
  <script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/menus.js">
  </script>
  <script type="text/javascript">
  // <![CDATA[
  var myMenu;
  window.onload = function() {
  myMenu = new SDMenu("my_menu");
  myMenu.init();
  };
  // ]]>
  </script>
  <div id="my_menu" class="sdmenu">
  <div class="collapsed">
  <span>Главное меню</span>
  <a href="/">Главная страница</a>
  <a href="/forum">Форум</a>
  <a href="/search/">Поиск по сайту</a>
  <a href="/load/114">Фильмы</a>
  <a href="/dir">ТОП сайтов</a>
  <a href="/forum/40-2159-1">Раздача 7-знаков</a>
  <a href="/forum/102">GOLD ключи для файлоомеников</a>
  <a href="/forum/44-2396-1">FAQ по uCoz</a>
  </div>
  <div class="collapsed">
  <span>Nokia 5530 XM</span>
  <a href="/board">Главная страница</a>
  <a href="/board/1">Игры</a>
  <a href="/board/3">Темы</a>
  <a href="/board/7">Фильмы</a>
  <a href="/board/2">Программы</a>
  <a href="/board/4">Обои</a>
  <a href="/board/8">Разное</a>
  <a href="/forum/34-2203-1">Обзор и обсуждения Nokia 5530 XpressMusic</a>
  <a href="/forum/34-2204-1">Ответы на вопросы</a>
  </div>
  <div class="collapsed">
  <span>Программы</span>
  <a href="/load/2">Безопасность</a>
  <a href="/load/3">Мультимедия</a>
  <a href="/load/5">Интернет</a>
  <a href="/load/40">Книги/Журналы</a>
  <a href="/load/41">OC</a>
  <a href="/load/45">Софт</a>
  <a href="/load/80">Система</a>
  <a href="/load/81">Офис</a>
  <a href="/load/82">Графика</a>
  <a href="/load/104">Portable Soft </a>
  <a href="/load/105">Русификаторы</a>
  <a href="/load/106">CD/DVD</a>
  <a href="/forum/53">Програмное обеспечение</a>
  </div>
  <div class="collapsed">
  <span>CS:S</span>
  <a href="/load/154">Карты</a>
  <a href="/load/155">Моды</a>
  <a href="/load/156">Патчи</a>
  <a href="/load/157">Модели оружия</a>
  <a href="/load/158">Взрывы/Выстрелы</a>
  <a href="/load/159">Модели игроков</a>
  <a href="/load/160">Читы</a>
  </div>
  <div class="collapsed">
  <span>Онлайн фильмы</span>
  <a href="/publ">Главная страница</a>
  <a href="/publ/1">Комедии</a>
  <a href="/publ/2">Боевики</a>
  <a href="/publ/3">Фэнтези</a>
  <a href="/publ/4">Ужасы</a>
  <a href="/publ/5">Драма</a>
  <a href="/publ/6">Мультики</a>
  <a href="/publ/7">Юмор,приколы</a>
  <a href="/publ/8">Приключения</a>
  <a href="/publ/9">Детективы</a>
  <a href="/publ/10">Документальные</a>
  <a href="/publ/11">Трейлеры</a>
  <a href="/publ/12">Онлайн ТВ</a>
  <a href="/publ/131">Клипы онлайн</a>
  </div>
  <div class="collapsed">
  <span>CS-1.6</span>
  <a href="/load/62">Скачать CS 1.6</a>
  <a href="/load/63">Готовые сервера</a>
  <a href="/load/64">Карты</a>
  <a href="/load/65">Модели оружия</a>
  <a href="/load/66">Модели игроков</a>
  <a href="/load/67">Патчи</a>
  <a href="/load/68">Боты</a>
  <a href="/load/69">Моды</a>
  <a href="/load/70">Читы</a>
  <a href="/load/71">Спрайты</a>
  <a href="/load/72">Руссификация cs</a>
  <a href="/load/73">Античиты</a>
  <a href="/load/119">Плагины</a>
  <a href="/load/147">Софт</a>
  <a href="/load/74">Разное</a>
  <a href="/forum/61">Форум о Counter Strike</a>

  </div>
  <div class="collapsed">
  <span>Все для uCoz</span>
  <a href="/load/18">Шаблоны для сайтов</a>
  <a href="/load/19">Шаблоны для форумов</a>
  <a href="/load/20">Иконки групп</a>
  <a href="/load/21">Ранги</a>
  <a href="/load/23">Кнопки для форумов</a>
  <a href="/load/115">Статьи вебмастер</a>
  <a href="/load/116">Макеты </a>
  <a href="/forum/69">Скрипты для uCoz& ... Читать дальше »

Категория: Меню | Просмотров: 553 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Меню для ucoz горизонтальное

Меню для ucoz горизонтальное

Меню для ucoz в тёмных тонах(серое). Отлично будет гармонировать с любой шапкой сайта. Горизонтальное меню для ucoz легко и просто устанавливается - скопируя код в нужное место на сайте.

Установка "Горизонтальное меню для ucoz":

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

Код

<div align="center"><div style="display:none;"><a href="http://wallaby.ucoz.ru/">Шаблоны для ucoz</a></div><span class="UhideBlock"><link rel="stylesheet" type="text/css" href="http://wallaby.ucoz.ru/menu/menu_wallaby3.css" />

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td class="menu_left" align="left"></td>
  <td class="menu_center" align="left">
  <ul class="topmenu">
  <li><a href="/" title="Главная">Главная</a></li>
  <li><a href="/forum" title="Форум Веб-майстрів">Форум</a></li>
  <li><a href="/load/prog/3" title="Програм/Soft">Програмы</a></li>
  <li><a href="/load/films/29" title="Скачать безплатно">Фильмы</a></li>
  <li><a href="/load/webm/19" title="Все для Веб-мастера">Все для Веб</a></li>
  <li><a target="_blank" title="Будь в курсе" href="/">RSS</a></li>
  <li><a title="" href="#" class="last_item"></a></li>
  </ul>
  </td>
  <td class="menu_right" align="left">
  <div class="searchbg">
<form action='/search'>
<input type="hidden" name="do" value="search" />
<input type="hidden" name="t" value="0">
<input type="hidden" name="m" value="dir" />
<input type="hidden" name="m" value="forum" />
<input type="hidden" name="m" value="load" />
<input type="hidden" name="m" value="news" />
<input type="hidden" name="m" value="load" />
<input type="hidden" name="m" value="publ" />
<input type="hidden" name="m" value="board" />
<input name="q" value="найти по сайту wallaby.ucoz.ru..." onBlur="if(this.value=='') this.value='найти по сайту wallaby.ucoz.ru...';" onFocus="if(this.value=='найти по сайту wallaby.ucoz.ru...') this.value='';" type="text" class="search_input" />
<input class="search_but" alt="Искать" type="image" src="http://wallaby.ucoz.ru/menu/spacer.gif" />
</form>
</div>
</td>
</tr>
</table>

Категория: Меню | Просмотров: 444 | Добавил: master | Дата: 11.09.2014 | Комментарии (0)

Красивое горизонтальное меню

Вставляем этот код в CSS,
Код

/***

  * Autor makeup: z1MO_ok
  * Demo URL: http://4gmob.ru/menu/
  * Autor URL: http://4gmob.ru/
  * Skype: artmen_ok

***/

#menu_bg {background:url(/img/bg_menu.png) no-repeat;width:940px;height:51px;overflow:hidden;margin:0 auto;position:relative;padding:6px;}
#menu {list-style:none;margin:0;padding:0;background:url(/img/bg_menu.png) no-repeat 0 -63px;width:938px;height:48px;overflow:hidden;border-radius:10px;}
#menu li {float:left;color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;padding:0 45px;height:48px;line-height:48px;}
#menu li:hover {background:url(/img/menu_li_hover.png) repeat-x 0 0;text-shadow:0 2px 0 #02486b;padding:0;}
#menu li a {color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;text-decoration:none;}
#menu li:hover span {background:url(/img/menu_li_hover.png) no-repeat center bottom;height:48px;display:block;line-height:48px;padding:0 45px;}
.divider {background:url(/img/divider.png) no-repeat right;width:2px;height:48px;display:block;float:left;}

Этот код ставим в нашу страницу сайта.
Код

<div id="menu_bg">
<ul id="menu">

<li><a href="#"><span>Home</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>About Us</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Services</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Products</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Clients</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Blog</span></a></li>
<span class="divider"></span>

<li><a href="#"><span>Contact</span></a></li>

</ul>
</div>

Скачать архив с исходниками меню.

Категория: Меню | Просмотров: 497 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Черное меню для сайта

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

Код

form {
padding:0px;
margin:0px;
} <style>

<SPAN class="blockmenu">
<a href="/" title="Главная страница">Главная</A>
<a href="/forum">Форум</a>
<a href="/publ/">Статьи</a>
</span>

Категория: Меню | Просмотров: 463 | Добавил: RedStar | Дата: 15.08.2014 | Комментарии (0)

1-10 11-20 21-30 31-34