[Resolved] Vertical navigation in sections?

Home Forums Support [Resolved] Vertical navigation in sections?

Home Forums Support Vertical navigation in sections?

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #175353
    Tom
    Lead Developer
    Lead Developer

    Ah, of course!

    You’re welcome ūüôā

    #177192
    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

    #177275
    Tom
    Lead Developer
    Lead Developer

    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 ūüôā

    #177595
    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)

    #177629
    Evandro Arruda

    Thanks a lot both of you!

    You guys are awesome!!

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.