Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Элегантное меню, работающее при помощи jQuery и убивающее всех наповал своей непредсказуемой формой и амбициями. Если вы решили заявить о себе, то вам стоит обратить на этот изыск пристальное внимание. Я расскажу как все сделать правильно и построить все, что вам только вздумается. А сейчас приступим к уроку.
По привычке уже, начнем прописывать все необходимое в голове. Как всегда – интегрируем стиль CSS, а так же внедряем скрипты jQuery и сопутствующий ему script.js.
<!-- Прописываем css //--> <link rel='stylesheet' type='text/css' href='css/styles.css' /> <!-- Прописываем необходимые скрипты //--> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script> <script type='text/javascript' src='script.js'></script>
Когда сделали все необходимое в шапке, рассмотрим немного css код. Чтобы не давать лишних комментариев каждой строчке, я решил присвоить некоторые описания внутри кода, это удобно. Смотрим и изучаем.
.menuUL li{
/* Это позволит организовать li рядом друг с другом. */
display:inline;
}
.menuUL li a,.menuUL li a:visited{
/* Стилизация гиперссылок в меню в виде кнопок */
float:left;
font-weight:bold;
background:url(img/button_bg.jpg) repeat-x center bottom #666666;
display:block;
border:1px solid #4D4D4D;
color:#CCCCCC;
border-top-color:#565656;
padding:4px 6px;
margin:4px 5px;
height:16px;
/* Настройка тени при помощи CSS3 вокруг кнопок для разных браузеров*/
-moz-box-shadow:0 0 1px black;
-webkit-box-shadow:0 0 1px black;
box-shadow:0 0 1px black;
/* Тень для текста на CSS3 */
text-shadow:0 1px black;
}
.menuUL li a:hover{
background-position:center top;
text-decoration:none;
}
#navigation{
/* Панель навигации меню: */
background:#222222;
border:1px solid #111111;
float:left;
padding:5px 10px;
}
#navigation,.menuUL li a{
/* Закругляем углы для кнопок навигационной панели при помощи CSS3 с поддержкой для разных браузеров*/
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
#stage{
/* Эта часть выстраивает полутона в необходимое изображение, иконку*/
height:300px;
position:absolute;
right:50px;
top:20px;
width:400px;
}
.dot{
/* Этот блок отвечает за 192 полутона */
float:left;
height:25px;
width:25px;
}
.dot.active{
/* При назначении активного класса, Div показывает фоновое изображение многоточием:*/
background:url(img/dot.png) no-repeat center center;
}
.clear{
clear:both;
}
#main{
margin:0 auto;
position:relative;
width:900px;
}
Разобравшись и с этим этапом нашего урока, перейдем к наиболее интересной части. Все конечно же отлично, за исключением одного. Как сделать свои собственные изображения? Ведь структура сайтов у всех разная, поэтому каждому такое меню не совсем будет уместно использовать.
/*
Для создания своей фигуры вместо false необходимо установить истинность для <b>serviceMode</b>, то есть значение <b>true</b>
*/
var serviceMode = true;
$(document).ready(function(){
...
}
После того, как нам стал доступен serviceMode, мы начинаем выстраивать фигуру.
Когда мы составили фигуру, нажимаем на ссылку [Показать координаты]. Копируем координаты в появившемся окне и вставляем их прямо в наш скрипт. Находим var shapes={…}, далее предумываем класс (я обозвал его hd) и заключаем скопированные координаты между квадратными скобками [...]. Не забывайте ставить запятые! Смотрите пример в левой части блока (изображение кликабельное).
Вы заметили, что каждая ячейка имеет порядковый номер, а если быть точнее то координату. Это позволяет расставить необходимые полутона в нужных ячейках. Это не пример того, как нужно вычислять координату каждой точки. Это всего лишь пример, который показывает как все устроено. Для вычисления координат, как я уже говорил ранее, нужно использовать serviceMode.
Ну а теперь давайте посмотрим на пример меню, который был сделан мною за пару минут.
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
/*
Каждая фигура представляет собой огромный массив полутонов, которые расположены по своей системе координат
*/
var shapes={
house:[22,37,38,39,52,...,168,169],
hd:[0,1,8,9,...,189]
}
Остальная часть скрипта нам не интересна. Но кому все таки захочется там покопаться, я постарался описать работу каждого блока.
Элегантное меню (28.3 KB, 33 скачиваний)
Файл залит 19.07.2010 в 23:38
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Просматриваю статьи на данном сайте уже небольшое время!!! И могу сказать сразу что буду продолжать это делать :D