Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
  • Страница 1 из 1
  • 1
Модератор форума: Emilia  
Меню
« Azzazil666 » Дата: Воскресенье, 31 Января 2010, 03:15:18 | Сообщение # 1
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 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
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 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
Заглянувшие
aNnyutka_Ya
«Проверенные»
Сообщений: 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);
}

Источник www.insicdesigns.com



Сообщение отредактировал(а) aNnyutka_Ya - Среда, 24 Февраля 2010, 03:05:52

 
  • Страница 1 из 1
  • 1
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2024 ()
уЧётчик сайта