Возможно ли?

[Hoc]

Доброго времени суток господа и дамы...

Не стал в заголовке расписывать весь вопрос - слишком длинно будет (извините).

Вопрос в следующем:

Возможно ли только с помощью HTML и CSS сделать такое же горизонтальное меню, как в шапке htmlbook.ru ..., ну, вот это, где "Статьи", "Книги", "Шаг за шагом" и т.д.

К примеру, я выбираю "Книги" - он (пункт меню) соответствующим образом форматируется (как выбранный пункт меню), и остается таковым пока я не выбиру другой пункт меню. При выборе другого пункта, к примеру "Рецепты", пункт "Книги" форматировался бы опять, как НЕ выбранный пункт меню.

Возможно такое уже обсуждалось, но я не нашел.

Подскажите пожалуйста, не сочтите за труд.

[Dimitry Wolotko]

Копайте в сторону a:hover

[Elendor]

Ну ты что не видишь что человек недал?кий в этих делах, ему надо поподробней обяснить

[Dimitry Wolotko]

Ну так и объясни

[Elendor]

A у меня есть веская причина по которой я не могу сейчас обяснить.

[Dimitry Wolotko]

Это какая же?

[Kichee]

Доброго времени суток господа и дамы....

Если только по средствам HTML и CSS, то это будет работать так:

У вас есть страницы:

Content.html (Статьи),

Books.html (Книги),

StepByStep.html (Шаг за шагом),

Forum.html (Форум).

Для кажой кнопки делаем две картинки, одну обычную, а другую без нижнего бардюра и на 2 пикселя меньше по высоте. Она будет выглядеть как выбранная.

Теперь на странице Content.html создаем шапку (таблица это будет или блоки - дело ваше) и загружаем в него картиночки, все картинки кроме "Статьи" загружаем простые, а картинку "Статьи" берем "нажатую", ту что без нижнего бардюра и ниже на 2 пиксела.

Также для других страниц, ту картинку, которая обозначает открытую страницу в шапке делаем "нажатой".

[Hoc]

2Elendor

Вы, по всей видимости, не достаточно хорошо прочли статью "Выделено: Культура поведения в разделе. оставил Dimitry Wolotko". Я просил (культурно просил) помочь, а не стебаться и флудить в моей теме. Ну, да ладно - бог вам (Elendor-у) судья.

(Elendor Сообщений: 28, 2-а из которых флуд в моей теме) - это на всякий случай для бога.

2Dimitry Wolotko

Копайте в сторону a:hover

Уж лучше в сторону a:focus или a:visited..., а в сторону a:hover хоть закопайся. Дело в том, что как только указатель мышки покинет пункт меню, он (пункт) становится прежним (НЕ выбраным)..., а мне нужно чтобы он "помнил", что его выбрали, до тех пор пока не будет выбран другой пункт меню.

2Kichee

Спасибо за объяснение.

Вы предлагаете даже без CSS обойтись..., это слишком "грубо/топорно" (хотя, возможно я так и поступлю, если не найду более изящьного решения).

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

[Dimitry Wolotko]

Ах, я вас не понял.

Смотрите:

* есть два стиля;

* первый стиль - это невыделенная кнопка;

* второй - выделенная;

* на каждой странице просто присваиваете клас той вкладке, которая является кнопкой текущего раздела.

К примеру, если вы на форуме - выделена будет именно она, вторым стилем.

[Elendor]

CSS

.moduletable-topnav {

 width : auto;
 padding : 0;
 }


.topnav { 
 width : 0; 
 text-decoration : none; 
 color : #614404;
 font-size : 14px;
 }

a.topnav {
 position : relative;
 width : auto;
 background : none;
 padding : 10px 6px 10px 6px;
 color : #614404;
 text-decoration : none;
 font-weight : normal;
 line-height : 36px !important; 
 line-height : 16px; 
 _height:0;

 }
a.topnav:hover{
 width : auto;
 color : #614404;
 background : #f6cb87;
 padding : 10px 6px 10px 6px;
 font-weight : normal;
 text-decoration : none;
 background : url(../images/act_nav.gif) #fae4c1 no-repeat top center;
 }
a.topnav#current {

 cursor : default;
 position : relative;
 width : auto;
 background : #f6cb87;
 padding : 10px 6px 10px 6px;
 color : #614404;
 text-decoration : none;
 background : url(../images/act_nav.gif) #fae4c1 no-repeat top center;
 }

a.topnav#current:hover {
 cursor : pointer;
 position : relative;
 width : auto;
 background : #d1c2aa;
 padding : 10px 6px 10px 6px;
 color : #614404;
 text-decoration : none;
 background : url(../images/act_nav1.gif) #d1c2aa no-repeat top center;

 }


a.topnav:visited, .topnav a:link {
text-decoration : none;
color : #fff;
}

HTML

<div class="moduletable-topnav">
<a href="http://ccылка 1" class="topnav" id="current">ccылка 1</a>

<a href="http://ccылка 3" class="topnav" >ccылка 2</a>
<a href="http://ccылка 3" class="topnav" >ccылка 3</a>
<a href="http://ccылка 4" class="topnav" >ccылка 4</a>
<a href="http://ccылка 5" class="topnav" >ccылка 5</a>
<a href="http://ccылка 6" class="topnav" >ccылка 6</a>
</div>

id="curent" - это озночает, что эта ссылка будет выделена до тех пор пока Вы не перейд?те на другую страницу. Если Вы перейд?те, например, на ссылку 3, то к ней автоматически присвоется id="curent", ну это если Вы пишите сайт на пхп, а если чистый хтмл, то можно через яву, Вот ссskrf - http://htmlbook.ru/download/?id=2, скачайте и там, я уверен, найд?те как сделать то что Вы хотите.

Неужели Вы и это дорогой гражданин Нос посчитаете флудом?

[Hoc]

2Elendor

Неужели Вы и это дорогой гражданин Нос посчитаете флудом?

Я адекватный человек, и легко отличаю нормальное, конструктивное общение от не нормального.

В связи с этим спасибо за предидущий пост..., но..., но..., как вы заметили, для реализации затеянного, приходится приплетать php или js - что-то же должно будет двигать id="curent" по ссылкам.

Отсюда мораль: только (!!!) средствами html и css НЕВОЗМОЖНО ... ну и далее по тексту топика.

ps

Только не совсем ясно, на кой ляд, тогда, наворотили этих псевдоклассов (:visited, :activ, :focus и т.д.)???

[Yarik Voronov]

http://forum.htmlbook.ru/viewtopic.php?pid=39143#p39143

http://htmlbook.ru/content/?id=110 "Эффект перекатывания с одним рисунком"

По первой ссылке берем принцип выделения активной ссылки с помощью CSS

по второй - принцип двойного рисунка.

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

З.Ы.:

Только не совсем ясно, на кой ляд, тогда, наворотили этих псевдоклассов (:visited, :active, :focus и т.д.)???

"А у вас на планете куры есть?" - спросил Лис Маленького Принца. "Есть." "А охотники?" "Тоже есть." "Эх! Нет в мире совершенства", - печально вздохнул Лис.

[D.S.Denton]

Отсюда мораль: только (!!!) средствами html и css НЕВОЗМОЖНО ...

угу. но тем не менее, если страницы просто статические, то код навигации имеется отдельно в каждой странице, потому совет Гепарда вполне подходит. если же меню втыкается средствами php или js, тут уже ничего не препятствует технически присвоению нужного класса

[Hoc]

Спасибо всем кто откликнулся на мою прозьбу.

Сейчас собиру умище в кучу и че-нить сваяю, основываясь на ваших подсказках.

Если получится что-нибудь путное - выложу на всеобщее обозрение.