Как сделать такое меню?

[Apocalypse]

Ребят, подскажите как сделать такое меню?

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

Смотрите прицепку :read:

 

[nubic]

Ребят, подскажите как сделать такое меню?

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

Смотрите прицепку :read:

собственно тут используются просто картинки со стрелочкой и свойства ссылок hover u active
например отфонаря пишу так что не ругайте
a {backgroung: url(image.png) no repeat;}
a:hover {backgroung: url(image1.png) no repeat;}
a:active {backgroung: url(image2.png) no repeat;}

 

[Jameson]

Кажется, понял. Конкретный код зависит от вашей верстки, но идея такова:

Есть ссылки, которые являются пунктами меню. В покое они имеют один фон.

#menu a { background: #B3D951 url("/static/img/menu_bg.gif") }

Прописываем стиль для ситуации, когда над ними проходит курсор - а именно стандартный фон заменяется фоном со стрелочкой.

#menu a:hover {
    background: #B3D951 url("/static/img/menu_arrow.gif") 
}

Активная ссылка, та, которую нажали, тоже по условия задачи должная выглядеть, как та, над которой проводят курсором - дополняем предыдущее правило

#menu a:hover, #menu a:active {
    background: #B3D951 url("/static/img/menu_arrow.gif") 
}

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

Наиболее простой вариант - объявить новый класс

#menu a.current_page {
    background: #B3D951 url("/static/img/menu_arrow.gif") 
}

и на стороне сервера при генерации меню подставлять в ссылку активного раздела class='current_page'

 

[Apocalypse]

Вот страница как раз и перезагружается =(

 

[Jameson]

Если лень курочить скрипт (или не уверен, как это сделать), прикрути хотя бы jQuery, оно умеет творить чудеса

Эта строчка

$("#menu a[href*="+document.location.pathname+"]").addClass("current_page");

добавляет ссылкам, которые находятся внутри элемента с id="menu" и ведут на текущую страницу, стилевой класс "current_page" (см. в предыдущем посте)

 

[Apocalypse]

Если лень курочить скрипт (или не уверен, как это сделать), прикрути хотя бы jQuery, оно умеет творить чудеса

Эта строчка

$("#menu a[href*="+document.location.pathname+"]").addClass("current_page");

добавляет ссылкам, которые находятся внутри элемента с id="menu" и ведут на текущую страницу, стилевой класс "current_page" (см. в предыдущем посте)

Так вот здесь подробнее пожалуйста, я чайник и не шарю =)

Скачал этот скрипт, скинул в папку, затем
у меня ссылка имеет вид:

<a class="menu1" href="/index.php?m=3&sid=">НОМЕРА</a>

Мне писать что и куда?
После ссылки?

<script type="text/javascript" src="jquery.js">
$("a.menu1[href*="+document.location.pathname+"]").addClass("current_page");
</script>

 

[Jameson]

<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>

$(document).ready(
  function(){
      $("a.menu1[href*="+document.location.pathname+ document.location.search+"]").addClass("current_page");
  }
)
</script>

 

[Apocalypse]

<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>

$(document).ready(
  function(){
      $("a.menu1[href*="+document.location.pathname+ document.location.search+"]").addClass("current_page");
  }
)
</script>

Не работает =( Не знаю что ему еще надо, но current_page он не дописывает!

 

[blacks]

Эх... иногда думаю что программы-утилитки по созданию полезнее чем ручками писать. Для стандартных задач подходят. Только графику "покрасивше"

Посмотри поиском по форуму "программы для создания меню"
(или нечто подобное) В них можно создать много чего (css, dinmic, flash)