[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Общая информация » Все о создании сайтов. » Менюшки сайтов
Менюшки сайтов
RedStarДата: Вторник, 08.06.2010, 03:26 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Менюшки сайтов.
 
RedStarДата: Вторник, 08.06.2010, 03:32 | Сообщение # 2
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
5 отличных меню на Javascript и CSS

Easy javascripts 1.0 - сборник отменных java-скриптов для создателей сайтов и не только.
В этом сборнике отменные java-скрипты. Большинство продаётся в сети за немалые деньги. Запакован в HTML-cправочник

Автор: JavasHelp
Формат: HTML-справочник

Скачать

 
RedStarДата: Понедельник, 12.07.2010, 02:27 | Сообщение # 3
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
меню горизонтальное для uCoz

Code
<table align="center">    
<A href="ссылка" onmouseout="document.mypic1.src='http://img.ucoz.ru/_ph/1/2/775511294.png'" onmouseover="document.mypic1.src='http://img.ucoz.ru/_ph/1/2/53769460.png'"><IMG border=0 name=mypic1 src="http://img.ucoz.ru/_ph/1/2/775511294.png"></A><A href="ссылка" onmouseout="document.mypic2.src='http://img.ucoz.ru/_ph/1/2/818991704.png'" onmouseover="document.mypic2.src='http://img.ucoz.ru/_ph/1/2/656938762.png'"><IMG border=0 name=mypic2 src="http://img.ucoz.ru/_ph/1/2/818991704.png"></A><A href="ссылка" onmouseout="document.mypic3.src='http://img.ucoz.ru/_ph/1/2/626641304.png'" onmouseover="document.mypic3.src='http://img.ucoz.ru/_ph/1/2/498979423.png'"><IMG border=0 name=mypic3 src="http://img.ucoz.ru/_ph/1/2/626641304.png"></A><A href="ссылка" onmouseout="document.mypic4.src='http://img.ucoz.ru/_ph/1/2/58622781.png'" onmouseover="document.mypic4.src='http://img.ucoz.ru/_ph/1/2/523236699.png'"><IMG border=0 name=mypic4 src="http://img.ucoz.ru/_ph/1/2/58622781.png"></A>    
</table>
 
RedStarДата: Понедельник, 12.07.2010, 02:29 | Сообщение # 4
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Меню Adobe.com

Переделанное меню adobe.com
Скачиваете архив, заливаете все по папкам которые внутри архива, этот код вставляете где меню.

Code
<style type="text/css">
@import "/css/dropdown.css";
@import "/css/advanced.css";
</style>
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="./">Главная</a></li>
<li><a href="./" class="dir">Форум</a>
<ul>
<li class="empty">Daemond</li>
<li><a href="./">Новости</a></li>
<li><a href="./">Правила</a></li>
<li><a href="./">Конкурсы</a></li>
<li class="empty">Топ 5 тем</li>
<li><a href="./">Тема</a></li>
<li><a href="./">Тема 2</a></li>
<li><a href="./">Тепа 3</a></li>
<li><a href="./">Тема 4</a></li>
<li><a href="./">Тема 5</a></li>
</ul>
</li>
<li><a href="./" class="dir">О нас</a>
</li>
<li><a href="./" class="dir">Услуги и цены</a>
</li>
<li><a href="./" class="dir">Наши баннеры</a>
</li>
<li><a href="./" class="dir">Топ 10 файлов</a>
<ul>
<li><a href="./">Вид материалов by Vladon</a></li>
<li><a href="./">Шаблон</a></li>
<li><a href="./">Шаблон 2</a></li>
<li><a href="./">Шаблон 3</a></li>
<li><a href="./">Шаблон 4</a></li>
<li><a href="./">Шаблон 5</a></li>
<li><a href="./">Шаблон 6</a></li>
<li><a href="./">Шаблон 7</a></li>
<li><a href="./">Шаблон 8</a></li>
<li><a href="./">Шаблон 9</a></li>
<li><a href="./">Шаблон 10</a></li>
<li><a href="./">Остальные ›</a></li>
</ul>
</li>
<li><a href="./" class="dir">Интересные статьи</a>
<ul>
<li><a href="./">Теги HTML</a></li>
<li><a href="./">Статья</a></li>
<li><a href="./">Статья 2</a></li>
<li><a href="./">Статья 3</a></li>
<li><a href="./">Статья 4</a></li>
<li><a href="./">Статья 5</a></li>
</ul>
</li>
<li><a href="./" class="dir">Профиль</a>
<ul>
<li><a href="./">Редактировать профиль</a></li>
<li><a href="./">Выход</a></li>
</ul>
</li>
</ul>


 
RedStarДата: Понедельник, 12.07.2010, 02:30 | Сообщение # 5
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Красивое меню

Code
<a href="$HOME_PAGE_LINK$" target="_blank"><img src="http://image-pc.at.ua/forums/1.jpg" border="0"></a>         
<a href="ССЫЛКА НА ИНФОРМАЦИЮ О САЙТЕ" target="_blank"><img src="http://image-pc.at.ua/forums/2.jpg" border="0"></a>         
<a href="ССЫЛКА НА ОБРАТНАЯ СВЯЗЬ" target="_blank"><img src="http://image-pc.at.ua/forums/3.jpg" border="0"></a>         
<a href="ССЫЛКА НА КАТАЛОГ ФАЙЛОВ" target="_blank"><img src="http://image-pc.at.ua/forums/4.jpg" border="0"></a>         
<a href="ССЫЛКА НА КАТАЛОГ СТАТЕЙ" target="_blank"><img src="http://image-pc.at.ua/forums/5.jpg" border="0"></a>         
<a href="ССЫЛКА НА БЛОГ" target="_blank"><img src="http://image-pc.at.ua/forums/6.jpg"    
border="0"></a>         
<a href="ССЫЛКА НА ФОРУМ" target="_blank"><img src="http://image-pc.at.ua/forums/7.jpg"    
border="0"></a>         
<a href="ССЫЛКА НА ФОТОАЛЬБОМЫ" target="_blank"><img src="http://image-pc.at.ua/forums/8.jpg" border="0"></a>         
<a href="ССЫЛКА НА КАТАЛОГ САЙТОВ" target="_blank"><img src="http://image-pc.at.ua/forums/9.jpg" border="0"></a>         
<a href="ССЫЛКА НА ГОСТЕВУЮ КНИГУ" target="_blank"><img src="http://image-pc.at.ua/forums/10.jpg"    
border="0"></a>
 
RedStarДата: Понедельник, 12.07.2010, 02:32 | Сообщение # 6
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Красивое меню для сайта ucoz + bonus menu

Красивое меню для сайта ucoz + bonus menu
В корне сайта создаём папку "images", закидываем всё, рисунки, скрипт, CSS
Создаём новый блок
Этот код вставляем в блок
Скачиваем архив с картинками и скриптами+ стиль
Ссылки корректируем, название своё, иконки можно вставлять свои
В общем полностью настраиваемый под свои нужды

Code
<link rel="stylesheet" href="images/cbcscbinsmenu.css" type="text/css" />

<ul id="ebul_cbinsmenu_3" class="ebul_cbinsmenu" style="display: none;">
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_1.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_2.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_3.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
</ul>
<ul id="ebul_cbinsmenu_4" class="ebul_cbinsmenu" style="display: none;">
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_4.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_5.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_6.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
</ul>
<ul id="ebul_cbinsmenu_5" class="ebul_cbinsmenu" style="display: none;">
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_7.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_8.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
<li><span class="ebul_imgcbinsmenu16x16"
style="background-image:
url('images/cbsiicbinsmenu_9.gif')"></span><a href="ваша
ссылка" title="">Название</a></li>
</ul>
<table id="cbinsmenuebul_table" width="0" cellpadding="0" cellspacing="0" border="0">
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_1"
src="images/ebbtcbinsmenu1_0.gif" name="ebbcbinsmenu_1" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_2"
src="images/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_2" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_3"
src="images/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_4"
src="images/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_5"
src="images/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_6"
src="images/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
<tr>
     <td
style="padding-bottom:1px" title=""><a href="ваша
ссылка"><img id="cbi_cbinsmenu_7"
src="images/ebbtcbinsmenu7_0.gif" name="ebbcbinsmenu_7" width="190"
height="32" border="0" alt="Название" title=""
/></a></td>
</tr>
</table>
<script type="text/javascript" src="images/cbjscbinsmenu.js"></script>

настраиваем под себя

 
RedStarДата: Понедельник, 12.07.2010, 02:38 | Сообщение # 7
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Вертикальное меню для ucoz

Code
<style type="text/css">    
{    
font-family: Verdana, Arial, Helvetica, sans-serif;    
font-size: 100%;    
font-weight: bold;    
background: #FFF;    
}    
       
h1 {    
font-family:Verdana, Arial, Helvetica, sans-serif;    
font-size:13px;    
font-weight:bold;    
margin:0;    
padding:0;    
}    
       
hr {    
border:none;    
border-top:1px solid #CCCCCC;    
height:1px;    
margin-bottom:25px;    
}    
       
ul {    
list-style: none;    
margin: 0;    
padding: 0;    
}    
       
img {    
border: none;    
}    
       
#menu {    
width: 168px;    
margin: 0px;    
border-style: solid solid none solid;    
border-color: #000;    
border-size: 1px;    
border-width: 1px;    
}    
       
#menu li a {    
height: 32px;    
voice-family: "\"}\"";    
voice-family: inherit;    
height: 24px;    
text-decoration: none;    
}    
       
#menu li a:link, #menu li a:visited {    
color: #9cff00;    
display: block;    
background: url(http://s45.radikal.ru/i107/0905/d9/686ecdceaea8.gif);    
padding: 8px 0 0 10px;    
}    
       
#menu li a:hover {    
color: #9cff00;    
background: url(http://s44.radikal.ru/i105/0905/b5/823ac2c3f10c.gif) 0 -32px;    
padding: 8px 0 0 10px;    
}    
</style>    
       
<div id="menu">    
<ul>    
<li><a href="ССЫЛКА"><span style="color:ffffff"><b>Главная страница</b></b></span></a></li>    
<li><a href="ССЫЛКА"><span style="color:ffffff">Форум</b></span></a></li>    
<li><a href="ССЫЛКА"><span style="color:ffffff">Галерея</b></span></a></li>    
<li><a href="ССЫЛКА"><span style="color:ffffff">Гостевая книга</b></span></a></li>    
<li><a href="ССЫЛКА"><span style="color:ffffff">Фильмы</b></span></a></li>    
</ul>
 
RedStarДата: Понедельник, 12.07.2010, 02:40 | Сообщение # 8
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Меню вертикальное не сложное

Code
<div id="menu4">    
<ul style="text-align: left;">    
<li><span><a href="/">Главная страница</a></span></li>    
<li><a href="/forum"><span>Трибуна общения</span></a></li>    
<li><a href="/news/real_madrid/1-0-2"><span>Новости клуба</span></a></li>    
<li><a href="/forum/16"><span>Тотализатор</span></a></li>    
<li><a href="/index/sostav_reala/0-9"><span>Состав Реала</span></a></li>    
<li><a href="/index/stadionforma/0-10"><span>Стадион,форма</span></a></li>    
<li><span><a href="/"> psp.ru</a></span></li>    
</ul>    
</div>    
<style>    
#menu4 {    
margin: 0px;    
padding: 0px;    
width: 200px;    
border-style: solid solid none solid;    
border-color: #D76100;    
border-size: 1px;    
border-width: 1px;    
}    

#menu4 li a {    
height: 22px;    
voice-family: "\"}\"";    
voice-family: inherit;    
text-decoration: none;    
}    

#menu4 li a:link, #menu4 li a:visited {    
color: #020100;    
display: block;    
background: url(http://barcareal.ru//diz/menu4.gif);    
padding: 10px 0 0 4px;    
}    

#menu4 li a:hover, #menu4 li #current {    
color: #050000;    
background: url(http://barcareal.ru//diz/menu4.gif) 0 -32px;    
padding: 10px 0 0 4px;    
}    

#menu4 li a:active {    
color: #fff;    
background: url(http://barcareal.ru//diz/menu4.gif) 0 -64px;    
padding: 10px 0 0 4px;    
}    
ul {    
    list-style: none;    
    margin: 0;    
    padding: 0;    
    }    
</style>

 
RedStarДата: Понедельник, 12.07.2010, 02:42 | Сообщение # 9
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Новое красивое меню [раздвижное]

Шаг 1: Сначала скачиваем архив и создаем папку menu в корне файла менеджера и закидываем все туда!

Шаг 2: Это ставим в глобальный блог меню: (Ну или куда хотим поставить меню):

Code
<div class="accordion">    
<h3><font color="#ffd700">Меню 1</font></h3>    
    <p class="linked">    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    </p>    
    <h3><font color="#ffd700">Меню 2</font></h3>    
    <p class="linked">    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    </p>    
    <h3><font color="#ffd700">Меню 3</font></h3>    
    <p class="linked">    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    </p>    
    <h3><font color="#ffd700">Меню 4</font></h3>    
    <p class="linked">    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    <a href="адрес">Пусто</a><br>    
    </p></div>

Тут где Пусто - название, адрес - ссылку на нее, Меню 1... - Название меню
Шаг 3: А это ставим перед : (на всех страницах)

Code
<script language="javascript" type="text/javascript" src="/menu/jquery.js"></script>    
<script language="javascript" type="text/javascript" src="/menu/accordion.js"></script>

Шаг 4: А это в CSS :(ставим в самый низ)

Code
/* Menut*/    
.accordion h3 {font-size : 11px;color : #fff;padding-left :
10px;background : url(/menu/accordion.png) no-repeat right
0;line-height :25p;height : 25px;cursor : pointer;margin : 0;text-align
: left;font-weight : bold;}    
.accordion h3:hover {background : url(/menu/accordion.png) no-repeat right -25px;color : #213548;}    
.accordion h3.active {background : url(/menu/accordion.png) no-repeat right -50px;}    
.accordion h3.active:hover {background : url(/menu/accordion.png) no-repeat right -75px;}    
.accordion p {display : none;margin : 0;padding : 7px 0 7px 7px;}    
.accordion a {font-size : 11px;color : #213548;text-align : left;font-weight : bold;padding-left : 15px;}    
.accordion p.linked a {background : url(/menu/cnup.png) no-repeat 0 50%;}    
/* ---------- */

Вот и все! Если он не подходит можете переделать его под себя!

Скачать

 
RedStarДата: Понедельник, 12.07.2010, 02:44 | Сообщение # 10
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Красненькое меню

Это CSS:

Code
#menu {font-size: 0.85em; height:3.10em; color: #000; text-align:center; background: url(http://s49.radikal.ru/i125/1005/6c/02d4b6059b3f.png); font-size:8pt;}
#menu div {margin: auto;}
#menu span {float:left; color: #999; background: url(http://s09.radikal.ru/i182/1005/9f/2d9fad2cc39a.png); padding: 11px 18px;}
#menu a {display:block; float:left; color: #e8e8e8; background: url(http://s49.radikal.ru/i125/1005/6c/02d4b6059b3f.png); text-align:center; padding: 10px 18px;text-decoration: none;}
# a:hover {color: #d9f1f2; background: url(http://s09.radikal.ru/i182/1005/9f/2d9fad2cc39a.png); padding: 11px 18px;}

Это там где хотите видеть меню:

Code
<div id="menu">
<a href="Ссылка" title="Главная">Главная Страница</a>
<a href="Ссылка" title="Форум">Форум</a>
<a href="Ссылка" title="Музыка">Музыка</a>
<a href="Ссылка" title="Фотки">Фотки</a>
<a href="Ссылка title="Гостевая">Гостевая Книга</a>
<a href="Ссылка title="Блог">Блог</a>
</div>
 
RedStarДата: Понедельник, 12.07.2010, 02:45 | Сообщение # 11
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Горизонтальное CSS меню для сайта

Это в CSS:

Code
/* Menus */
#menu li {
      display: inline-block;
      list-style:none;
      width: 98px;
      height: 22px;
      text-align: center;
      padding-top: 3px;
      background-repeat:no-repeat;
      color: #ffffff;
      background-position:center;
}
.mattblacktabs{
      width: 100%;
      overflow: hidden;
      border-bottom: 1px solid #363636;      
      background: #FFA500;
      width: 944px;      
      border-left: 1px solid #363636;
      border-right: 1px solid #363636;
      border-top: 1px solid #363636
}

.mattblacktabs ul{
      margin: 0;
      padding: 0;
      padding-left: 0;      
      font: 12px Arial, Helvetica, sans-serif;
      list-style-type: none;
}

.mattblacktabs li{
      display: inline;
      margin: 0;
}

.mattblacktabs li a{
      float: left;
      display: block;
      text-decoration: none;
      margin: 0;
      padding: 3px 8px;      
      border-right: 1px solid #363636;      
      color: #857040;
      background: #FFA500;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: #E8E8E8; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
/* --------- */

Это туда, где хотите видеть меню:

Code

<!-- МЕНЮ -->
<DIV class="mattblacktabs">
      <UL>
      <LI><A href="/">Главная</A></LI>
      <LI><A href="/index/0-2">Гостевая</A></LI>
      <LI><A href="/load">каталог файлов</A></LI>
      <LI><A href="/news">Новости сайта</A></LI>
      <LI><A href="/dir">каталог сайтов</A></LI>
      <LI><A href="ссылка">Видеотека</A></LI>
      <LI><A href="ссылка">обоины</A></LI>
      <LI><A href="http://winskin.ru">winskin.ru</A></LI>
      <LI><A href="ссылка">Разное</A></LI>
      <LI><A href="ссылка">Партнёрам</A></LI>
      <LI><A href="/forum">форум сайта</A></LI>
      <LI><A style="border-right:none; width: 33px;"  href="ссылка">ссылка</A></LI></UL></DIV>
<!--/МЕНЮ-->
 
RedStarДата: Понедельник, 12.07.2010, 02:50 | Сообщение # 12
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Горизонтальное меню для uCoz

Красивое горизонтальное меню для uCoz
В CSS вставляем:

Code
#modernbricksmenu{    
    padding: 0px;    
    width: 100%;    
    background: transparent;    
    voice-family: ""}"";    
    voice-family: inherit;    
}    
#modernbricksmenu ul{    
    font: bold 11px Arial;    
    margin: 0px;    
    margin-left: 40px;    
    padding: 0px;    
    list-style: none;    
}    
#modernbricksmenu li{    
    display: inline;    
    margin: 0 2px 0 0;    
    padding: 0px;    
    text-transform: uppercase;    
}    
#modernbricksmenu a{    
    float: left;    
    display: block;    
    color: white;    
    margin: 0 1px 0 0;    
    padding: 5px 10px;    
    text-decoration: none;    
    letter-spacing: 1px;    
    background-color: black;    
    border-bottom: 1px solid white;    
}    
#modernbricksmenu a:hover{    
    background-color: gray;    
}    
#modernbricksmenu #current a{    
    background-color: #D25A0B;    
    border-color: #D25A0B;    
}    
#modernbricksmenuline{    
    clear: both;    
    padding: 0px;    
    width: 100%;    
    height: 5px;    
    line-height: 5px;    
    background: #D25A0B;    
}    
#myform{    
    float: right;    
    margin: 0px;    
    padding: 0px;    
}    
#myform .textinput{    
    width: 190px;    
    border: 1px solid gray;    
}    
#myform .submit{    
    font: bold 11px Verdana;    
    height: 22px;    
    background-color: lightyellow;    
}

Куда хотите чтобы было меню

Code
<div id="modernbricksmenu">    
    <ul>    
    <li style="margin-left: 1px"><a href="ссылка" title="Описание">Link</a></li>    
    <li><a href="ссылка" title="Описание">Link</a></li>    
    <li><a href="ссылка" title="Описание">Link</a></li>    
    <li id="current"><a href="ссылка" title="Описание">Link</a></li>    
    <li><a href="ссылка" title="Описание">Link</a></li>    
    </ul>    
</div>    
<div id="modernbricksmenuline"></div>
 
RedStarДата: Понедельник, 12.07.2010, 02:53 | Сообщение # 13
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
меню плавное горизонт


Установка:
1. Для начала установим стили для меню:

Code
  <style type="text/css">

      #menu {
       background: #3e3e3e;
       padding: 7px 25px 7px 25px;
       text-align: center;
       border: 5px solid #00b4ff;
       }

      #menu a {
       font-variant: small-caps;
       text-decoration: none;
       font-weight: bold;
       color: white;
       font-size: 10pt;
       padding: 7px;
       font-family: Tahoma;
       }

      #menu a:hover {
       background: #b52828;
       }

      </style>

2. Затем поставим скрипт, который будет "растворять" пункт меню при наведении на него мышкой:

Code
<script type="text/javascript">
$('#menu a').hover(function () {
     $(this).animate({
      opacity: 0.5
     },
     1000);
},
function () {
     $(this).animate({
      opacity: 1
     },
     1000);
});
</script>

3. Ну и само меню:

Code
  <div id="menu">
       <a href="/">
        главная
       </a>
       <a href="/forum">
        форум
       </a>
       <a href="/load">
        софт
       </a>     
       <a href="/publ">
        фильмы
       </a>
       <a href="/index/8">
        профиль
       </a>
       <a href="/index/10">
        выход
       </a>
      </div>

Ну вот и всё.

Скачать

 
RedStarДата: Понедельник, 12.07.2010, 03:54 | Сообщение # 14
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Делаем меню через CSS

Картинки выставляйте свои!

Это кидаем в CSS:

Code
img{border: 0pt;}

#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
#vista_toolbar ul {
background-image:url(back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:500px;
}
#vista_toolbar li {
display:inline;
padding:0;
}
#vista_toolbar a {
color:#FFF;
float:left;
padding:0 3px 0 3px;
text-decoration:none;
}
#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}
#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}
#vista_toolbar a:hover{
background: url(left.png) no-repeat left center;
}
#vista_toolbar a:hover span {
background:url(right.png) no-repeat right center;
}
#vista_toolbar a.right {
float:right;
}

Код меню в html:

Code
<div id="vista_toolbar">
<ul>
<li><a href="#"><span><img align="left" src="add.gif" alt="Добавить" />Добавить</span></a></li>
<li><a href="#"><span><img align="left" src="mail.gif" alt="Почта" />Почта</span></a></li>
<li><a href="#"><span><img align="left" src="chart.gif" alt="Статистика" />Статистика</span></a></li>
<li><a href="#"><span><img align="left" src="mona.gif" alt="Фотогалерея" />Фотогалерея</span></a></li>
<li><a class="right" href="#"><span><img align="left" src="sos.gif" alt="Помощь" />Помощь</span></a></li>
</ul>
</div>
 
RedStarДата: Понедельник, 12.07.2010, 04:13 | Сообщение # 15
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
горизонтальное меню для сайта

установка
1 скачиваем архив
2 кидаем картинки в файловый менеджер, в папку images
3 идём в редактор страниц,кидаем туда 'тот код перед первым <HEAD>

Code
<style type="text/css">   

/*Credits: ST1M */   
/*URL: http://www.nncity.nnov.ru */   

.solidblockmenu{   
margin: 0;   
padding: 0;   
float: left;   
font: bold 13px Arial;   
width: 100%;   
overflow: hidden;   
margin-bottom: 1em;   
border: 1px solid #625e00;   
border-width: 1px 0;   
background: black url(/images/blockdefault.gif) center center repeat-x;   
}   

.solidblockmenu li{   

display: inline;   
}   

.solidblockmenu li a{   
float: left;   
color: white;   
padding: 9px 11px;   
text-decoration: none;   
border-right: 1px solid white;   
}   

.solidblockmenu li a:visited{   
color: white;   
}   

.solidblockmenu li a:hover, .solidblockmenu li .current{   
color: white;   
background: transparent url(/images/blockactive.gif) center center repeat-x;   
}   

</style>

4 ставите этот код туда где хотите увидеть своё меню

Code
<ul class="solidblockmenu">   
<li><a href="Ссылка" class="current">Название</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>

5 смотрим

 
Форум » Общая информация » Все о создании сайтов. » Менюшки сайтов
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz