« Azzazil666 »
|
Дата: Воскресенье, 31 Января 2010, 03:15:18 | Сообщение # 1
|
Князь - Мира Сия
|
Сообщений: 418
|
|
|
Горизонтальное меню v 2.0 установка меню: 1). Создаёте в файловом менеджере папку "images", потом надо залить (скачав ниже) картинки в эту папку, которые находятся в папке "Иконки"!!! 2). Вставить содержимое туда где вы хотите увидеть это меню Code <link rel="stylesheet" href="images/cbcscbinsmenu.css" type="text/css" />
<table id="cbinsmenuebul_table" width="0" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding-right:1px" title=""><a><A href="ТУТ ВАША ССЫЛКА"><img id="cbi_cbinsmenu_1" src="images/ebbtcbinsmenu1_0.gif" name="ebbcbinsmenu_1" width="135" height="26" border="0" alt="Главная страница" title="Главная страница"/></a></td> <td style="padding-right:1px" title=""><a><A href="ТУТ ВАША ССЫЛКА"><img id="cbi_cbinsmenu_2" src="images/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_2" width="141" height="26" border="0" alt="Шаблоны для Ucoz" title="Шаблоны для Ucoz"/></a></td> <td style="padding-right:1px" title=""><a><A href="ТУТ ВАША ССЫЛКА"><img id="cbi_cbinsmenu_3" src="images/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="82" height="26" border="0" alt="Скрипты" title="Скрипты"/></a></td> <td style="padding-right:1px" title=""><a><A href="ТУТ ВАША ССЫЛКА"><img id="cbi_cbinsmenu_4" src="images/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="131" height="26" border="0" alt="Написать админу" title="Написать админу"/></a></td> </tr> </table> <script type="text/javascript" src="images/cbjscbinsmenu.js"></script> Вот и всё,пользуйтесь на здоровье!!! Архив в приклеплениях
|
|
|
|
« Azzazil666 »
|
Дата: Среда, 03 Февраля 2010, 03:39:18 | Сообщение # 2
|
Князь - Мира Сия
|
Сообщений: 418
|
|
|
Меню Vista (Горизонтальное) Это ставьте туда где вы хотите, на любую страницу: Code <table cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td background="/vistamenu/mijloc.png" valign="center" width="50"> <div id="hardButton"> </div> <br></td> <td background="/vistamenu/mijloc.png" width="500" height="41"> <div id="vista_toolbar"> <ul> <li> <a href="$HOME_PAGE_LINK$"><span><img src="/vistamenu/Principala.png" align="left">Главная</span></a></li> <li><a href="$HOME_PAGE_LINK$/forum"><span><img src="/vistamenu/Forum.png" align="left">Форум </span></a></li> <li><a href="$HOME_PAGE_LINK$/load"><span><img src="/vistamenu/fisiere.png" align="left">Каталог файлов</span></a></li> <li><a class="right" href="$HOME_PAGE_LINK$index/10"><span><img src="/vistamenu/iesire.png" align="left">Выход</span></a></li> <li> <a class="right" href="$PERSONAL_PAGE_LINK$"><span><img src="/vistamenu/profil.png" align="left">Профиль</span></a></li> </ul> </div></td> <td align="center" background="/vistamenu/mijloc.png"> <br></td></tr> </tbody></table> <table border="0" cellpadding="10" cellspacing="0" width="100%"><tbody><tr><td align="center" valign="top"> Это ставьте в CSS:Code #vista_toolbar {float:left;font:normal 12px 'Trebuchet MS','Arial';margin:0;padding:0;} #vista_toolbar ul {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(/vistamenu/left.png) no-repeat left center;} #vista_toolbar a:hover span {background:url(/vistamenu/right.png) no-repeat right center;} #vista_toolbar a.right {float:right;} #vista_toolbar1 {float:left;font:normal 12px 'Trebuchet MS','Arial';margin:0;padding:0;} #vista_toolbar1 ul {background-repeat:repeat-x;float:left;line-height:30px;list-style:none;margin:0;padding:0 10px 0 10px; width:680px;} #vista_toolbar1 li {display:inline;padding:0;} #vista_toolbar1 a {color:#FFF;float:left;padding:0 3px 0 3px;text-decoration:none;} #vista_toolbar1 a span {display:block;float:none;padding:0 10px 0 7px;} #vista_toolbar1 a span img {border:none;margin:8px 4px 0 0;} #vista_toolbar1 a:hover{background: url(/vistamenu/left.png) no-repeat left center;} #vista_toolbar1 a:hover span {background:url(/vistamenu/right.png) no-repeat right center;} #vista_toolbar1 a.right {float:right;} архив скачать в прикрепление, ...и залить в корень сайта.
|
|
|
|
« aNnyutka_Ya »
|
Дата: Среда, 24 Февраля 2010, 02:26:02 | Сообщение # 3
|
Заглянувшие
|
Сообщений: 32
|
|
|
Создание красивого меню с помощью CSS3 и jQuery, с множеством цветовых схем. В Opere - Не работает! HTML разметка Code <div class="lavalamp" > <ul> <li class="active"><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Blog</a></li> <li><a href="">Services</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contacts</a></li> <li><a href="">Back to Article</a></li> <li><a href="">How it Works?</a></li> </ul> <div class="floatr"></div> </div> Мы используем неупорядоченный список для меню.Code <div class="floatr"></div> - элемент, который будет подсвечивать выбранную ссылку. CSS Следующий отрывок кода используется для стилизации меню. В нем использованы несколько свойств CSS3, таких как border-radius, box-shadow, rgba и gradient. Code .lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204)); height: 18px; } Следующий код относится к каждому элементу меню:Code ul { margin: 0; padding: 0; z-index: 300; position: absolute; }
ul li { list-style: none; float:left; text-align: center; }
ul li a { padding: 0 20px; text-align: center; } И последняя часть кода для подсветки:Code .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; } Тут следует обратить внимание на свойства transition. C помощью их мы анимируем наш бегунок подсветки ссылок. Это свойство имеет следующий синтаксис: Code transition: свойство продолжительность эффект; Более подробно про это свойство можно прочитать тут. JavaScript Роль JavaScript в этом примере - это получение текущей позиции активного элемента и позиции мышки при наведении ее на наше меню. После определения позиций - необходимые css свойства вступают в силу и происходит анимация. Code $(document).ready(function () { //найти текущую позицию активного элемента var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; var dwidth = $('.lavalamp li.active').width() + "px"; //присвоить эту позицию элеметку с подсветкой $('.floatr').css({ "left": dleft+"px", "width": dwidth }); $('.lavalamp li').hover(function(){ var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15); var width = $(this).width() + "px"; var sictranslate = "translate("+left+"px, 0px)"; $(this).parent('ul').next('div.floatr').css({ "width": width, "-webkit-transform": sictranslate, "-moz-transform": sictranslate }); }, function(){ var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15); var width = $(this).siblings('li.active').width() + "px"; var sictranslate = "translate("+left+"px, 0px)"; $(this).parent('ul').next('div.floatr').css({ "width": width, "-webkit-transform": sictranslate, "-moz-transform": sictranslate }); }).click(function(){ $(this).siblings('li').removeClass('active'); $(this).addClass('active'); return false; }); }); Для Вас также доступны другие цветовые решения данного меню: Code .magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-linear-gradient(top,rgb(190,64,120), rgb(177,24,91)); border: 1px solid #841144;
}
.cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-linear-gradient(top, rgb(64,181,197), rgb(7,165,187)); border: 1px solid #2f8893;
} .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-linear-gradient(top, rgb(255,199,79), rgb(255,188,43)); border: 1px solid #c08c1f; }
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-linear-gradient(top, rgb(255,133,64), rgb(255,107,24)); border: 1px solid #c04f11; }
.dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-linear-gradient(top, rgb(89,89,89), rgb(54,54,54)); border: 1px solid #272727;
} .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); }
Сообщение отредактировал(а) aNnyutka_Ya - Среда, 24 Февраля 2010, 03:05:52
|
|
|
|