Мне нужно создать меню навигации для одной страницы

Question

Мне нужно создать меню навигации для одной страницы

0

Мне нужно меню навигации для страницы, которую я создаю, и я бы хотел изменить активную ссылку, когда кто-то на нее нажимает. У меня уже есть стили в активной ссылке, но я не знаю, как это изменить. Если это изменится, когда кто-то нависнет над ним, это тоже будет здорово. Javascript в порядке. Спасибо.

Меню

<div class="row">
    <div class="small-12 medium-12 large-3 columns">
        <a class="logo" href="/">Saul Designs</a>
    </div>

    <div class="large-7 columns">
        <nav class="main-nav show-for-large-up">
            <ul>
<!-- below this is what i need to have change-->

                                    <li><a class="active" href="#start">START</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#work" >WORK</a></li>
                <li><a href="#contact">CONTACT</a></li>

    <!-- and above this -->
            </ul>
        </nav>
    </div>

    <div class="large-2 columns">
        <div class="normal-button alternate show-for-large-up">
            <a href="mailto:[email protected]">HIRE ME</a>
        </div>
    </div>
</div>

saulpm 13 апр. 2014, в 23:11

Источник

0

может ли это помочь? stackoverflow.com/questions/20767161/...
Zach Lysobey 13 апр. 2014, в 20:35

Теги:

javascript

html

css

1 ответ

Ещё вопросы

может ли это помочь? stackoverflow.com/questions/20767161/...

Fuzzyma · Answer 1 · 2014-04-13T19-45-00.000Z

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

Поэтому вам нужно написать:

<li><a id="start" href="#start">START</a></li>
<li><a id="about" href="#about">ABOUT</a></li>
<li><a id="work" href="#work" >WORK</a></li>
<li><a id="contact" href="#contact">CONTACT</a></li>

Затем вам нужно добавить еще 4 стили:

#start:target, #about:target, #work:target, #contact:target{
    background:#555; /* or as you want... */
}

Таким образом, он должен работать без какого-либо дополнительного javascript. Мне это не нравится, потому что вы должны указывать каждый идентификатор, и вы загрязняете css-пространство. Но я не знаю другого способа, используя только html и css.