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

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



Всем привет!

В этом уроки я покажу вам, как создать раздвижное меню с помощью JQuery. Вы сможете увидеть этот эффект в действии на сайте http://psd.tutsplus.com/ в верхнем правом углу, или по ссылке демо

Раздвижное вертикальное меню с помощью JQuery

Откройте программу Adobe Photoshop и создайте новый документ с желаемым размер кнопки, кнопки могут быть любого размера по вашему желанию. Используем размер 182х32 пикселей, дважды нажать на фоновый слой и добавить простое наложения градиента.

Раздвижное меню на JQuery

На правой стороне нашей кнопки добавим элемент белую стрелку и вертикально разделим её. Разделить стоит из двух линий цветом #302f2f и #252525.

Навигационное меню на JQuery

В левой стороне меню добавим маленький значок и текст, я не думаю, что мне нужно вдаваться в подробности как это реализовать, так как вы будете делать собственный значок для вашего собственного сайта (сохранить изображение кнопки в папку изображений).

Меню на JQuery

Теперь самый интересный момент - открыть редактор и сохранить пустой документ, как styles.css. После сохранения закройте документ, откройте папку "выпадающего меню" и создайте две новые папки, одну назовите JS, а другую - images.

После нам понадобиться библиотека JQuery "JQuery-1.3.1.min.js". Переименовать файл просто "JQuery" и вставьте его в папку JS. Откройте редактор и создайте новый HTML документ и сохраните документ сразу внутри папки выпадающего меню (имя файла HTML неважно, называйте как хотите, я назвал его как sliding_menu.html.) Теперь в вашем редакторе перейдите на вкладку кода.

Кнопка для JQuery

Что мы должны сделать в первую очередь? Нам понадобиться подключить наш JavaScript и CSS файлов мы сделаем это, введя этот кусок кода между тегов "HEAD".

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

Вы наверняка заметили, что мы подключили 3 файла - у нас есть подключения styles.css, jquery.js и третий slider.js Нам нужно создать slider.js, откроем редактор и создадим пустой документ. Сохраним как slider.js в папке JS. Откройте ваш файл slider.js в редакторе и вставьте следующий код:

$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});

Теперь разберём код. Ваша первая линии означает, что если документ будет загружен, выполнится функция, в нашем случае раздвижное меню. В следующей строке по одному клику на изображении с классом menu_class будет выпадать меню, скорость которого регулируется в 3 линии. Вы можете изменить скорость, если вы хотите от медленной, средней или быстрой скорости. Вторая и третья линия важны, поскольку они занимают ключевые элементы, касающиеся нашей CSS, где img.menu_class и ul.the_menu. Теперь прикрепем HTML код меню.

<img src="images/button.png" width="184" height="32"
class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></l>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Первый кусок кода вы видите просто изображение, которое является нашей кнопкой, мы указать ширину и высоту нашей кнопки мы также даём ему класс. Класс будет уникальным изображения опорной точки для JS файл, который мы уже писали. Класс также позволяет нам применять любые стили CSS с помощью с помощью класса. Menu_class. После этого мы просто создаём ненумерованный список. Если мы откроем наше добро в браузере то это будет выглядеть примерно вот так.

Выпадающий список

Откройте ваш CSS файл в редакторе. Прописываем несколько стиль для основной части нашего документа.

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

Простые настройки фона, шрифта.

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
border:1px solid #1c1c1c;
}

Следующие CSS стиль относится к меню, которое выпадает после нажатия кнопки.

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
}

В этих стилях вы можете менять ширину открывшемся меню, шириной 300px, это может быть то, что вы хотели. Также придать ему 1px рамку так же, как нашу кнопку. Следующий стиль относится к цвету фона нашего проката из навигации, а также цветов и размеров.

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}

  • .the_menu li цвет фона навигации
  • .the_menu li a Цвет ссылки, Нижние подчёркивание, внутрение отступы в 10px, навидение курсора на весь тег li
  • .the_menu li a:hover Сслки при навидение курсора

Просто и быстро. Спасибо за внимание и не забудьте сказать спасибо :)



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



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

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

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


            
        


        Макс    09.11.2010 12:46:31
        

Подскажите пожалуйста, как поменять button на допусти button active после нажатия?


        Сабрина    10.11.2010 13:25:53
        

Лев, ответь пожалуйста на вопрос. По-старинке можно Javascript-ом менять стили для любого клиентского контрола


        Лев    16.02.2011 8:44:16
        

Да при помощи DOM


        Кэст    06.10.2011 19:53:37
        

Подскажите пожалуйста как сделать чтоб меню выдвигалось влево а не в право? у меня вертикальное (css и javascript)

95.57.21.192




Имя:  


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



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



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