A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: codeigniter/Common.php

Line Number: 148

A PHP Error was encountered

Severity: Notice

Message: Only variables should be passed by reference

Filename: database/DB.php

Line Number: 133

Выпадающее меню с помощью jQuery | MasterInWeb.Net

Выпадающее меню с помощью jQuery

В этом уроке я покажу Вам, как создать выпадающее меню. Для реализации нашей задумки, мы будем использовать JavaScript библиотеку jQuery. Такое меню, в настоящее время, очень часто используется на различных сайтах.

Задумка такова, при нажатии на кнопку, выпадает блок, в котором находятся ссылки, если кнопку нажать повторно, то меню закрывается.

Давайте приступим к работе. Во-первых, нам необходимо создать кнопку, на которую необходимо будет нажимать. Откройте программу Photoshop. Создайте новый документ желаемого размера. Я буду использовать размер 182х32 px. Дважды щелкнем на слой, откроется панель Стили слоя. Добавим нашему слою градиент.

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

В левой части добавим наш маленький значок и текст. Сохраним изображение в папку с изображениями сайта.

Теперь начинается самая интересная часть нашего урока. Во-первых, нам необходимо создать (если еще не созданы) файлы HTML и CSS. Откроем любой текстовый редактор и создадим два файла с именами: index.html, style.css. Так, как в этом уроке мы будем использовать библиотеку jQuery, сначала ее нужно скачать. Присоединим все JavaScript и CSS файлы к HTML файлу.

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

Как Вы могли заметить, мы подключаем три файла, а у нас пока, их только два. Нам нужно создать и третий документ. После создания, сохраните его с именем slider.js.

Перед тем, как писать код, который позволит осуществить эффект выпадения, нам необходимо создать меню.

<img  src="images/button.png" width="184" height="32"  class="menu_class" />
<ul  class="the_menu">
	<li><a  href="#">Ссылка№1</a></li>
	<li><a  href="#"> Ссылка№2</a></li>
	<li><a  href="#"> Ссылка№3</a></li>
	<li><a  href="#"> Ссылка№4</a></li>
	<li><a  href="#"> Ссылка№5</a></li>
	<li><a  href="#"> Ссылка№6</a></li>
	<li><a  href="#"> Ссылка№7</a></li>
	<li><a  href="#"> Ссылка№8</a></li>
</ul>

В первой части кода Вы можете увидеть простое изображение, которое является нашей кнопкой. Этому изображению мы задали класс menu_class. Этот класс будет необходим для написания JavaScript сценария. Класс также нам позволяет применять стили. Для этих же целей, мы создали класс the_menu и для неупорядоченного списка UL. Вот так, пока, выглядит наше меню:

После того, как у нас есть структура меню, мы можем приступить к созданию выпадения. Откройте файл slider.js и вставьте в него следующий код:

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

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

Теперь пришло время для создания стилей. Откройте 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;
}

Мы убрали стандартный стиль списка и задали ему границу. Теперь нам необходимо создать стили для меню, которое будет выпадать после нажатия кнопки.

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

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

.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;
}

Теперь Вы можете сохранить все документы и посмотреть, что у вас получилось. Надеюсь, Вам понравился результат. Спасибо за внимание!

Просмотров: 15057      Дата: 08.05.2010 17:41:50
Понравился урок? Добавьте его к себе в закладки.

Последние уроки категории:

Установка jQuery плагина - jDigiClock - Digital Clock

jDigiClock — интересный плагин, выполненный на jQuery. Вдохновением для данного плагина стал виджет Hero Clock на HTC. Плагин может показывать цифровое время и погоду, достаточно удобно настраивается и его легко устанавливать.

Русско-английский переводчик используя Google Ajax API

Google предоставляет разработчикам массу возможностей для работы со своими сервисами. Как вы наверное поняли из названия поста, я буду использовать Google AJAX API. Что же это такое и для чего это нужно можно прочитать здесь и здесь. Для работы нам понадобятся: php и jQuery.

Создаем Ajax конвертер валют

Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать узнаете в этой статье.

Красивое акордеон меню на jQuery

В этом уроке Вы узнаете, как создать известный JavaScript аккордеон меню с самым минимальным количеством HTML, CSS, JavaScript кодом и, конечно, с красивым интерфейсом.

Выпадающее меню с помощью jQuery

В этом уроке я покажу Вам, как создать выпадающее меню. Для реализации нашей задумки, мы будем использовать JavaScript библиотеку jQuery. Такое меню, в настоящее время, очень часто используется на различных сайтах.

Комментарии:

  • Алексей 18.10.2010 21:07:07
    Подскажи, пожалуйста, как вместо кнопки можно использовать текст - заголовок в рамке?
    Ответить
  • Лева 04.05.2013 21:21:40
    Можно ли сделать , что бы меню выезжало в сторону ?
    Ответить
  • Осталось: 1000 символов.
    Сохранить комментарий Отправка комментария
lessons
downloads
search
hosting

Ищите хороший и не дорогой хостинг?

Хостинг avahost.ua
VPS VDS - виртуальный выделенный сервер
sistems
Обменник.ws