Горизонтальное меню на CSS

[Vempel]

При наведении на пункт меню выпадает подменю.Но сам пункт меню имеет идентификатор и если на него кликнуть то откроется пустая страница. Как сделать так чтобы при клике на меню ничего не происходило (не открывалась пустая страница). или например шла автоматическая переадресация на главную страницу. Заранее благодарен за любую помощь.

 

[lekzd]

скриптами найти этот пункт меню по идентификатору и заменить ссылку на ##

 

[motek]

скриптами найти этот пункт меню по идентификатору и заменить ссылку на ##

сразу сделать ссылку не активной, в условии задачи на меню наводят, а не клацают

При наведении на пункт меню выпадает подменю.Но сам пункт меню имеет идентификатор и если на него кликнуть то откроется пустая страница. Как сделать так чтобы при клике на меню ничего не происходило (не открывалась пустая страница). или например шла автоматическая переадресация на главную страницу. Заранее благодарен за любую помощь.

покажите код Вашего меню

 

[Vempel]

Modx Evo сниппет wyfinder. Код меню формируется через сниппет. А в моем случае править надо css или исходный код меню формируемый через снипет.

 

[lekzd]

покажите код Вашего меню

HTML код

 

[Vempel]

И еще один вопрос правда не совсем в тему. Хочу в подменю сделать маркеры в виде картинки. Как можно настроить расположение картинки чтобы она располагалась рядом с текстом.

HTML код

<ul id="menu"><li><a href="http://localhost/video/" title="Главная страница" >Главная страница</a></li>
<li><a href="/video/8.html" title="Слаботочные системы" >Слаботочные системы</a><ul id="sub"><li><a href="/video/15.html" title="Монтаж СКС" >Монтаж СКС</a></li>
<li><a href="/video/16.html" title="Установка антенн" >Установка антенн</a></li>
<li><a href="/video/18.html" title="Подключение интернета" >Подключение интернета</a></li>
<li class="last"><a href="/video/20.html" title="Беспроводной интернет" >Беспроводной интернет</a></li>
</ul></li>
<li class="active"><a href="/video/2.html" title="Видеонаблюдение" >Видеонаблюдение</a><ul id="sub"><li><a href="/video/11.html" title="Видеоглазки" >Видеоглазки</a></li>
<li class="active"><a href="/video/21.html" title="Системы видеонаблюдения" >Системы видеонаблюдения</a></li>
<li><a href="/video/22.html" title="Типовые решения" >Типовые решения</a></li>
<li class="last"><a href="/video/23.html" title="Обслуживание систем" >Обслуживание систем</a></li>
</ul></li>
<li><a href="/video/5.html" title="Охранная сигнализация" >Охранная сигнализация</a><ul id="sub"><li><a href="/video/14.html" title="Установка сигнализации" >Установка сигнализации</a></li>
<li><a href="/video/24.html" title="Виды датчиков" >Виды датчиков</a></li>
<li><a href="/video/25.html" title="Системы охраны" >Системы охраны</a></li>
<li class="last"><a href="/video/26.html" title="Обслуживание" >Обслуживание</a></li>
</ul></li>
<li class="last"><a href="/video/4.html" title="Контроль доступа" >Контроль доступа</a><ul id="sub"><li><a href="/video/12.html" title="Установка СКД" >Установка СКД</a></li>
<li><a href="/video/13.html" title="Турникеты" >Турникеты</a></li>
<li><a href="/video/27.html" title="Системы СКД" >Системы СКД</a></li>
<li><a href="/video/28.html" title="Учет рабочего времени" >Учет рабочего времени</a></li>
<li><a href="/video/29.html" title="Управление доступом" >Управление доступом</a></li>
<li class="last"><a href="/video/31.html" title="Обслуживание систем" >Обслуживание систем</a></li>
</ul></li>
</ul>

 

[tigra60]

Как можно настроить расположение картинки чтобы она располагалась рядом с текстом.

Кроссбраузерно - только фоновым рисунком. И не пытайтесь использовать list-style-image! Каждый браузер позиционирует его по-своему.

А что касается сниппета wyfinder, он вроде бы как настраивается очень гибко. Поспрашивайте на форуме по mod-X

 

[Vempel]

У меня через list-style-image отображение маркеров (картинок) как на приложенной картинке . А как сделать его фоновым рисунком. Прописываю в css

#sub li { /*Отвечает за подменю*/
background-image: url(bullet.png);
width: 10px;
height: 10px;

ссылка на изображение http://narod.ru/disk...8353/1.jpg.html

 

[tigra60]

Ну, во-первых, нужно заменить id="sub" на class="sub". Идентификаторы на странице должны быть уникальными.
Во-вторых, фоновый рисунок лучше прикладывать к ссылке, чтобы картинка тоже была кликабельна
В-третьих, нужно запретить размножение рисунка и указать его позицию, а также добавить отступ слева, чтобы текст не наезжал на картинку, например, так:

.sub li a { /*Отвечает за подменю*/
background: url(bullet.png) no-repeat center left;
padding-left: 20px;
}

 

[motek]

покажите код Вашего меню

HTML код

исходя из названия темы - скорее CSS код

Modx Evo сниппет wyfinder. Код меню формируется через сниппет. А в моем случае править надо css или исходный код меню формируемый через снипет.

править надо исходный код - четыре элемента с одинаковым id :blink:

У меня через list-style-image отображение маркеров (картинок) как на приложенной картинке . А как сделать его фоновым рисунком. Прописываю в css

#sub li { /*Отвечает за подменю*/
background-image: url(bullet.png);
width: 10px;
height: 10px;

ul
{
   list-style: none;
}
ul#menu li ul.sub li
{
   background: transparent url('bullet.png') no-repeat left center;
}
ul#menu li ul.sub li a
{
   padding-left: 10px;
}

в под_меню id="sub" поменять на class="sub"

п.с. Тигра успел...

 

[NDolzhnikov]

Вставить в a href onclick="JavaScript:return false;" должно помочь. Тогда клик на ссылке работать не должен.

 

[motek]

Вставить в a href onclick="JavaScript:return false;" должно помочь. Тогда клик на ссылке работать не должен.

<a href="javascript:void(0);" title=""></a>