<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Выдвигающееся меню
06.10.2013 14:27:45 Выдвигающееся меню Сообщение #1
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Здравствуйте!
Я сделал меню на CSS. При наведении на пункт "Второй" - справа появляется подменю. Подменю появляется резко, т.е. его не было, а потом оно сразу появилось. А как можно сделать, чтобы подменю плавно выезжало слева на право? Можно это сделать на одном CSS или надо подключить какой-то скрипт?

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
ul {
list-style: none;
padding: 0;
width: 150px;
}
li {
position: relative;
cursor: pointer;
}
span {
display: block;
border: 1px solid #00f;
padding: 10px 30px;
}
#submenu {
display: none;
}
#main-menu li:hover #submenu {
display: block;
position: absolute;
left: 150px;
top: 0;
}
</style>
</head>
<body>
<ul id="main-menu">
<li>
<span>Первый</span>
</li>
<li>
<span>Второй</span>
<ul id="submenu">
<li>
<span>1 Пункт</span>
</li>
<li>
<span>2 Пункт</span>
</li>
<li>
<span>3 Пункт</span>
</li>
</ul>
</li>
<li>
<span>Третий</span>
</li>
</ul>
</body>
Профиль Ответить
06.10.2013 20:36:28 Выдвигающееся меню Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Без JavaScript не обойтись, причём задача это весьма сложная, поэтому тут рекомендую использовать jQuery для её упрощения.
Профиль Ответить
07.10.2013 13:34:53 Выдвигающееся меню Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Михаил! В jquery есть действия slideDown , slideUp
Прямых действий типа slideLeft, slideRight нет.
Скажите, пожалуйста, какие в jquery есть действия аналогичной направленности - чтобы скрытый объект (display: none) мог выдвигаться слева направо и справа налево.
Профиль Ответить
07.10.2013 21:50:12 Выдвигающееся меню Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
Профиль Ответить
08.10.2013 17:35:01 Выдвигающееся меню Сообщение #5
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Большое спасибо за ссылку - очень полезные скрипты!

Я нашел способ как можно сделать выдвигающее меню на одном CSS. Пишу, если кому-то пригодиться - нужно использовать свойство transition-duration:
Для контейнера подменю <ul></ul> задаем width: 0; overflow: hidden; transition-duration: 1000 ms; display: none (если требуется).
Потом контейнеру подменю <ul></ul> задаем вид при наведении - width: 150px; display: block;
Теперь при наведении, ширина контейнера подменю будет плавное увеличиваться от 0 до 150px - создается эффект выдвигающегося меню.

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