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

Тема в разделе "Веб-дизайн", создана пользователем Apocalypse, 12 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Apocalypse

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Ребят, подскажите как сделать такое меню?

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

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

    Вложения:

    • макет1.jpg
      макет1.jpg
      Размер файла:
      28,6 КБ
      Просмотров:
      63
  2. nubic

    nubic

    Регистр.:
    29 май 2008
    Сообщения:
    382
    Симпатии:
    151
    собственно тут используются просто картинки со стрелочкой и свойства ссылок 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;}
     
  3. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Кажется, понял. Конкретный код зависит от вашей верстки, но идея такова:

    Есть ссылки, которые являются пунктами меню. В покое они имеют один фон.
    Код:
    #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'
     
  4. Apocalypse

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Вот страница как раз и перезагружается =(
     
  5. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Если лень курочить скрипт (или не уверен, как это сделать), прикрути хотя бы jQuery, оно умеет творить чудеса :)

    Эта строчка

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

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

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Так вот здесь подробнее пожалуйста, я чайник и не шарю =)

    Скачал этот скрипт, скинул в папку, затем
    у меня ссылка имеет вид:
    Код:
    <a class="menu1" href="/index.php?m=3&sid=">НОМЕРА</a>
    Мне писать что и куда?
    После ссылки?
     
  7. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Код:
    <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>
    
     
  8. Apocalypse

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Не работает =( Не знаю что ему еще надо, но current_page он не дописывает!
     
  9. blacks

    blacks

    Регистр.:
    26 сен 2008
    Сообщения:
    391
    Симпатии:
    24
    Эх... иногда думаю что программы-утилитки по созданию полезнее чем ручками писать. Для стандартных задач подходят. Только графику "покрасивше"

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