[Resolved] Vertical navigation in sections?

[Tom]

Ah, of course!

You’re welcome 🙂

[Evandro Arruda]

Hi Tom!!

Still on this topic, see if you could helpe me this:
1) Can the avigation dot change color when the page is on its section?
2) I’m using anchors on section’s first paragraph to link with the dots. Am I doing it right?

Thanks

[Tom]

Hi there,

1. This is tough – it requires some custom javascript which is out of the scope of this forum I’m afraid. Worth asking over on stackoverflow though.

2. Sounds good to me 🙂

[Sven]

Hi Evandro,

I have set anchors in each section and added this to my custom css:

/* define vertical menu */
.my-handmade-vertical-menu {
    position: fixed;
    bottom: 0;
    left: -60px;
    right: 100px;
    margin-left: 0;
    padding: 15px;
    width: 58px;
    color: #9e9e9e;
    background-color: rgba(255, 255, 255, 0.2); /* semi-transparent */
    white-space:nowrap;
    z-index: 3; /* so it's on top of all layers */
}

/* reset and re-show words in vertical menu --> these are also my anchor names */
.my-handmade-vertical-menu ul .top,
.my-handmade-vertical-menu ul .focus,
.my-handmade-vertical-menu ul .aboutus,
.my-handmade-vertical-menu ul .team,
.my-handmade-vertical-menu ul .testimonials,
.my-handmade-vertical-menu ul .ribbonright,
.my-handmade-vertical-menu ul .latestnews,
.my-handmade-vertical-menu ul .contact {
    background: none;
}

.my-handmade-vertical-menu ul li {
    display: block;
}

/* sets color and strenght on hover */
.my-handmade-vertical-menu ul li:hover a {
    color: #12324e;
    font-weight: bold;
}

/* sets empty circle as li before hover */
.my-handmade-vertical-menu li a:before {
    font-family: FontAwesome;
    content: "\f10c";
}

/* sets filled circle as li on active */
.my-handmade-vertical-menu li a:active {
    font-family: FontAwesome;
    content: "\f111";
}

/* sets filled circle as li before hover */
.my-handmade-vertical-menu li:hover a:before {
    font-family: FontAwesome;
    content: "\f111";
}

/* hides words in vertical menu when not on hover */
.my-handmade-vertical-menu li a span {
    display: none;
}

/* shows words in vertical menu on hover on li */
.my-handmade-vertical-menu li:hover a span {
    display: inline-table;
}

And then I hooked to “header”:

<?php if ( is_front_page() ) : ?>              // only show on front-page
    <div class="my-handmade-vertical-menu">
        <ul>
            <li class="top"><a href="#"><span>  Start</span></a></li>
            <li class="aboutus"><a href="#aboutus"><span>  warum ich</span></a></li>
            <li class="focus"><a href="#focus"><span>  Mandanten</span></a></li>
            <li class="testimonials"><a href="#testimonials"><span>  Stimmen</span></a></li>
            <li class="ribbonright"><a href="#ribbonright"><span>  Bewerten</span></a></li>
            <li class="latestnews"><a href="#latestnews"><span>  Aktuelles</span></a></li>
            <li class="team"><a href="#team"><span>  vCards</span></a></li>
            <li class="contact"><a href="#contact"><span>  Kontakt</span></a></li></ul>
    </div>
<?php endif; ?>

(make sure the hook is activated)

[Evandro Arruda]

Thanks a lot both of you!

You guys are awesome!!

[Author]

Posts