Подсветка выбранного пункта меню
Как подсветить какой пункт в меню выбран? Обновлю вопрос, поскольку не нашел ответа. Вот что мне надо! И прошу, не надо писать, что на каждой странице надо вручную переделывать меню.
4 ответа 4
Дописываете class к пункту и пишете ему css свойства выбранного элемента (тут уже на ваше усмотрение изменить цвет, подчеркнуть и т.д.)
Добавлено из комментария.
Нет это статичный код. Я совсем не это имел ввиду, нужен скрипт что бы выделял так последний нажатый пункт после перехода на страницу, делать так на каждой странице — смешно.
можно сделать с помощью jquery
Добавить класс menu в любое меню на странице(их даже может быть не сколько) и соответственно прописать стили для класса active
Так же вариант в php
а будет ли работать с динамично создаваемыми ссылками? Начало всегда одно, например search.php, а затем к нему плюсуется номер сессии и другое.
Какая бы страница не была, jquery подсветит её, и не нужно заморачиваться с лишний кодом, юзайте jquery, и добавляйте класс menu(можете изменить) во все блоки меню.
Думаю, вы это имеете в виду (тень):
box-shadow:3px 3px #FFFFFF 15px; То есть класс «active» присвоить родительскому элементу.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.26.43546
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Активный пункт меню
Активный пункт меню — весьма востребованное свойство для любого сайта. И в этой статье мы рассмотрим, как можно силами CSS и небольшого кода JavaScript сделать такое весьма значимое решение на Вашем сайте.
Уверен, Вы не раз сталкивались с подобного рода визуальными эффектами на сайтах и хотели бы реализовать данную возможность у Вас на сайте. Нет проблем, эта статья поможет воплотить Вашу мечту в реальность.
Когда-то давным давно я сам задавался этой проблемой, пока не пришел к выводу, что бесполезно искать какие-то сторонние решения и решил создать свой скрипт, который легок для понимания любому мало-мальски подготовленному программисту в JavaScript, легко встраивается в любой шаблон, дизайн, в любую систему управления сайтом, хоть Joomla, хоть WordPress или иные. Итак, представляю Вашему вниманию активный пункт меню CSS и JavaScript.
Для начала подключаем между тегами
и JQuery библиотеку, вот код.Чтобы более наглядно продемонстрировать Вам всю возможность и порядок действий для начала создайте любое меню между тегами , например, вот такое.
Как мы видим из примера это у нас обычное меню, которому мы присвоили класс menu — учтите, Вы можете присваивать такой класс, который Вы считаете нужным, чтобы у Вас не было проблем с одинаковыми классами меню, настоятельно рекомендую использовать уникальные названия классов.
И вот, мы установили такое меню. Теперь наша задача сделать так, можно сказать, представить в голове, а потом кодом, как нам нужно, чтобы выглядел активный пункт меню при нахождении на соответствующей странице. Для этого мы будем использовать CSS и давайте придумаем класс для нашего активного пункта меню и назовем его active. Учтите, Вы можете назвать его как Вашей душе угодно. Вот примерный код.
Заметьте, все, что Вы пишите в CSS, должно относится к нашему пункту меню, который мы хотим сделать активным. Теперь же нам необходимо сделать маленький скрипт, который бы определял, на какой мы находимся странице, а затем при условии, что эта страница равна нашей запрошенной — присваивал нужному нам пункту меню свой класс active. И наш пункт меню бы окрасился в нужным нам цвет, поменял бы шрифт, или сменил background. Ниже код, не забудьте, вставляем его между тегами
Учтите, что у Вас могут возникнуть вопросы — Вы всегда сможете оставить свои комментарии под этой статьей. Удачи в написании отличных менюшек.
Подсветка текущего пункта меню
Всем привет. Уже 2 недели бьюсь над наверное для кого-то (но не для меня) простой проблемой — выделение пункта главного меню, где нахожусь в данный момент. Сайт: http://7энергий.рф . Сайт сделан на движке NetCat. Меню реализовано в виде маркированного списка и имеет вид:
ul id="nav"> li>a href="http://7энергий.рф/index">ГЛАВНАЯ/a>/li> li>a href="http://7энергий.рф/electropower">ПОЛУЧЕНИЕ ЭЛЕКТРИЧЕСКОЙ МОЩНОСТИ/a>/li> li>a href="http://7энергий.рф/soglasovania">СОГЛАСОВАНИЯ/a>/li> li>a href="http://7энергий.рф/projects">ПРОЕКТИРОВАНИЕ/a>/li> li>a href="http://7энергий.рф/bussines">БИЗНЕС-ПАКЕТ/a>/li> div id="lavalamp">/div> /ul>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background: url('/m_images/menu_bg.png') no-repeat scroll 0 0 transparent; clear: both; height: 56px; padding: 0 0 0 20px; position: relative; width: 920px; } #nav ul { background-color: #222; border:0px solid #222; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; position: absolute; top: -9999px; z-index: 2; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; } #nav li { background: url('/m_images/menu_line.png') no-repeat scroll right 5px transparent; float: left; position: relative; } #nav li a { color: #ffcc66; display: block; float: right; font-size: 16px; font-family: Arial Narrow, Verdana, sans-serif; font-weight: bold; height: 36px; padding: 20px 20px 0; position: relative; text-decoration: none; text-shadow: 1px 1px 1px #000000; } #nav li:hover > a { color: #ffcc00; } #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { background: none repeat scroll 0 0 #000; outline: 0 none; } #nav li:hover ul.subs { left: 0; top: 53px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } #nav ul li { background: none; width: 100%; } #nav ul li a { float: right; } #nav ul li:hover > a { background-color: #121212; color: #00B4FF; } #lavalamp { background: url('/m_images/lavalamp.png') no-repeat scroll 0 0 transparent; height: 16px; left: 888px; position: absolute; top: -2px; width: 64px; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; } #lavalamp:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s; } #nav li:nth-child(1):hover ~ #lavalamp { left: 40px; } #nav li:nth-child(2):hover ~ #lavalamp { left: 250px; } #nav li:nth-child(3):hover ~ #lavalamp { left: 490px; } #nav li:nth-child(4):hover ~ #lavalamp { left: 645px; } #nav li:nth-child(5):hover ~ #lavalamp { left: 798px; }
Требуется подсветить текущий пункт меню так, как это происходит при наведенном курсоре. Помогите! Отблагодарю чем смогу.