Как сделать выпадающее меню?

Yuliko · 2015-04-26 20:56:47

Есть ли какой-нибудь плагин, который можно использовать с этой целью?

irbees2008 · 2015-04-27 07:06:04

Yuliko пишет:

Есть ли какой-нибудь плагин, который можно использовать с этой целью?

Если в меню используются все категории которые указаны в админке для отображения,то все можно решить скриптом и не большими изменениями в файле news.categories.tpl.

Отредактировано irbees2008 (2015-04-27 07:13:53)

Zemlemer · 2015-04-27 12:06:16

1. гуглим "pure css dropdown menu"
2. берем любой понравившийся пример и вставляем в нужный шаблон.

Yuliko · 2015-04-30 15:17:51

irbees2008 пишет:

Yuliko пишет:
Есть ли какой-нибудь плагин, который можно использовать с этой целью?
Если в меню используются все категории которые указаны в админке для отображения,то все можно решить скриптом и не большими изменениями в файле news.categories.tpl.

А поподробнее можно? Я хочу сделать вертикальное меню.

Yuliko · 2015-04-30 16:10:44

rusiq пишет:

Yuliko, вы покажите на примере любого сайта. Меню ведь может быть и слева и справа, если оно вертикальное. Да и исполнение его может быть любым: js, css и др.

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

Отредактировано Yuliko (2015-04-30 16:18:28)

Yuliko · 2015-04-30 16:35:21

rusiq пишет:

) так это не вертикальное, а горизонтальное. Это категории из news.categories.tpl выводятся?

Точно, горизонтальное! Как раз собиралась исправить )). Нет, ссылки на категории заданы вручную.

Отредактировано Yuliko (2015-04-30 16:35:56)

Yuliko · 2015-04-30 16:45:13

Из этой

<a href="http://dao-zhizni.ru/beauty.html" title="Все о сохранении красоты">Красота</a>

должны выпадать:

http://dao-zhizni.ru/uhod-za-lizom.html 
и 

http://dao-zhizni.ru/uhod-za-telom.html

, остальных пока нет. Мне пример нужен, дальше я по аналогии сделаю.

Отредактировано Yuliko (2015-04-30 16:46:25)

Yuliko · 2015-04-30 18:55:11

rusiq пишет:

Yuliko, вот

то что надо, но почему-то на сайте ничего не меняется (((

Вставила в main

<div class="go-menu">
<ul class="nav-menu">
		<li><a href="http://dao-zhizni.ru/beauty.html" title="Все о сохранении красоты">Красота</a>
			<ul>
			<li><a href="http://dao-zhizni.ru/uhod-za-lizom.html">Уход за лицом</a></li>
			<li><a href="http://dao-zhizni.ru/uhod-za-telom.html">Уход за телом</a></li>
			</ul>
		</li>
		<li><a href="http://dao-zhizni.ru/health.html" title="Здоровье">Здоровье</a></li>
		<li><a href="http://dao-zhizni.ru/practice.html" title="Женские практики и медитации">Женские практики</a></li>
		<li><a href="http://dao-zhizni.ru/money-money.html" title="Процветание и благополучие">Процветание</a></li>
		<li><a href="http://dao-zhizni.ru/relations.html" title="Любовь, секс и отношения">Любовь&Секс</a></li>
		<li><a href="http://dao-zhizni.ru/cozy-home.html" title="Полезности для дома и семьи">Полезности</a></li>
		<li><a href="http://dao-zhizni.ru/lifestyle.html" title="Стиль жизни">Стиль жизни</a></li>
		<li><a href="http://dao-zhizni.ru/horoscope.html" title="Гороскоп на каждый день">Гороскоп</a></li>
		<li><a href="http://dao-zhizni.ru/none/sotrudnichestvo.html" title="Сотрудничество">Сотрудничество</a></li>
	</ul></div>

в css

.nav-menu, .nav-menu li, .nav-menu ul {
list-style: none;
padding: 0;
margin: 0;}
.nav-menu a {
display: block;
white-space: nowrap;
color: #fff;
padding: 0 8px;
margin: 0;
font-weight: 600;
text-transform: uppercase;}
.nav-menu li, .nav-menu a {
line-height: 28px;
height: 28px;
}

На сайте все в одну строчку (((. Что я неправильно делаю?

Стили go-menu выглядят так:

.go-menu {height:28px;}
.go-menu a {display:block;height:28px;line-height:28px;color:#fff;text-decoration: none;padding:0px 7px 0px 7px;float: left;font-weight:600;text-transform:uppercase;}
.go-menu a:hover {background:#0077AF;color:#fff;}
.go-menu img {border: 0;float: left;}

Отредактировано Yuliko (2015-04-30 19:07:02)

Yuliko · 2015-04-30 19:32:21

rusiq пишет:

Yuliko, в style.css 8 строка примерно удалить .page2 div{overflow:hidden}

Урряяяя!!!! Заработало! Спасибо вам огромное!

Next Generation CMS :: Форум поддержки

Объявление

#1 2015-04-26 20:56:47

Как сделать выпадающее меню?

#2 2015-04-27 07:06:04

Re: Как сделать выпадающее меню?

#3 2015-04-27 12:06:16

Re: Как сделать выпадающее меню?

#4 2015-04-30 15:17:51

Re: Как сделать выпадающее меню?

#5 2015-04-30 16:10:44

Re: Как сделать выпадающее меню?

#6 2015-04-30 16:35:21

Re: Как сделать выпадающее меню?

#7 2015-04-30 16:45:13

Re: Как сделать выпадающее меню?

#8 2015-04-30 18:55:11

Re: Как сделать выпадающее меню?

#9 2015-04-30 19:32:21

Re: Как сделать выпадающее меню?

Подвал форума