Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






Навигационное меню средствами jQuery



Приветствую уважаемые посетители! Меня зовут Нужный Кирилл. Я вам сейчас покажу как можно сделать красивое меню. Данной статьёй я начинаю серию публикаций на данном сайте, и потому хочу для знакомства показать вам как быстро и легко можно создавать красивые панели меню для любого сайта.

Для начала создадим две папки images и JS. В папке images поместим наши 3 картинки которые мы будем использовать для меню (их можно скачать прямо отсюда, вызвав контекстное меню на следующих картинках):

И соответственно в JS будет JavaScript - код нашей менюшки и библиотеки jQuery.

Для начала нам нужно создать html разметку нашей менюшки. А также подключить JS и CSS:




Как обычно для создания меню будем использовать ненумерованные списки.



1.
2. 3. 4.

Ну что, теперь нам надо разобраться с внешним видом меню - с этим у нас справится CSS с вот таким содержанием:

/* Указываем внутренние и внешние отступы в 0px */

*{
padding:0;
margin:0;
}

/* Задаём различные параметры 
для ключевого тега body */

body {
background-image: url(images/bg.png); 
background-repeat: repeat-x;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5f5f5f;
}

/* Собственно говоря, это и есть наши стили 
для контейнера где всё и будет протекать */

#content_wrap {
margin: auto;
width: 850px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}

/* Мелкие стили исключительно 
для тегов h1 */

h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}

/* Шапка */

#header {
float: left;
height: 94px;
width: 850px;
}

/* Ну а тут и стили для 
самого блока с меню */

#navigation {
float: left;
height: 62px;
width: 850px;
}

/* В стилях ненумерованного списка 
желательно указать внутренние и внешние отступы по 0 */

.nav_links ul {
margin: 0px;
padding: 0px;
}

/* Стили для тегов li (маленьких 
контейнеров) где лежат наши ссылки */

.nav_links li {
list-style:none;
display:block;
font-size: 14px;
float: left;
}

/* Ну и собственно стили для ссылок */

.nav_links a {
text-decoration: none;
color: #990000;
display: block;
height: 40px;
padding-top: 22px;
padding-right: 27px;
padding-left: 26px;
}

/*Состояние cсылки при наведении мыши*/

/* И кстати так просто мы 
это изменение не оставим =) */

.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/hover.png);
background-repeat: no-repeat;
}

/*Небольшая мелочь - класс для тега li*/

/* для отображения боковой полоски 
чтобы было видно что это прямоугольники*/ 

.withdiv {
background-image: url(images/divider.png);
background-repeat: no-repeat;
}

Теперь рассмотрим JS код, он простенький:

$(function() {
//Прозрачность (Opacity) набора кнопки к 100 %
$(".nav_links a").css("opacity","1.0");

//При наведении мыши 
$(".nav_links a").hover(function () {

//Набор Opacity к 30 %
$(this).stop().animate({
opacity: 0.3
}, "slow");
},
function () {

//набор Opacity к 100 %
$(this).stop().animate({
opacity: 1.0
}, "slow");
});
});

Вот таким нехитрым кодом мы за 5 минут создали очень красивое и динамичное навигационное меню. Ещё раз пример jQuery-меню.



Больше информации читайте по теме:

Анимация на Jquery
CSS - вертикальное выезжающее меню на Jquery
Очень сочное расползающееся меню на Jquery Easing и CSS
Красивое слайдшоу в стиле движущихся объектов на CSS и Jquery
Jquery горизонтальное навигационное меню с увеличивающимися иконками при наведении
Перекрестное выпадающее вертикально-горизонтальное универсальное анимированное меню на CSS3 и Jquery
RollOver кнопки средствами JavaScript (Jquery)
Раздвижное (выпадающее) вертикальное навигационное меню на JQuery
Стильное навигационное меню.
Всплывающая графическая подсказка на MooTools



Оценить статью:

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

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Олег    23.03.2010 11:26:29
        

Очень классно! Я как раз искал какое меню сделать для своего минисайта. Довольно быстро все получилось. Спасибо.


        Кирилл    24.03.2010 11:10:40
        

спс


        Александр Рубанов    30.03.2010 22:48:46
        

Спасибо Кирилл тебе за урок. Очень красивое, и не сложное с точки проектирования, меню.




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок