Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Vertical navigation in sections?

Home Forums Support Vertical navigation in sections?

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #174577
    Sven

    Hi Tom,

    I actually stumbled over a theme.

    I like the nav bar at the right side for the vertical navigation between sections. Do you know such a plugin (or key words to search for)? Or can it be implemented directly into GP?

    Regards,
    Sven

    • This topic was modified 4 years, 9 months ago by Tom.
    #174586
    Tom
    Lead Developer
    Lead Developer

    Not aware of any plugins, but it’s worth searching for.

    Something like this could definitely be integrated into GP.

    I want to add more one-page features into GP, this would be one of them – maybe in Menu Plus 🙂

    #174653
    Sven

    What about that idea: one creates and positions a “flying box” within the page. In this box the links could easily be arranged with anchor per section…!?

    like a

    .my-handmade-vertical-menu {
    properties like position, width, ul/li etc
    }

    What do you think about that?

    #174722
    Tom
    Lead Developer
    Lead Developer

    Could absolutely be done using GP Hooks.

    For example:

    <?php if ( is_page( 'my-specific-page' ) ) : ?>
        <div class="my-handmade-vertical-menu">
            <ul>
                <li><a href="#first-section">First section</a></li>
                <li><a href="#second-section">Second section</a></li>
                <li><a href="#third-section">Third section</a></li>
                <li><a href="#fourth-section">Fourth section</a></li>
            </ul>
        </div>
    <?php endif; ?>

    Then some CSS:

    .my-handmade-vertical-menu {
        position: fixed;
        top: 40%;
        right: 0;
    }
    
    .my-handmade-vertical-menu ul,
    .my-handmade-vertical-menu li {
        list-style-type: none;
        margin:0;
        padding: 0;
        width: 200px;
        background: #222222;
    }
    
    .my-handmade-vertical-menu li a {
        display: block;
        padding: 5px 10px;
        color: #FFF;
    }

    Something along those lines 🙂

    #174743
    Sven

    WOW – thumbs up! 🙂

    And I’m nearly done… two open tasks:

    1. sections with background-images float in the front, so the list isn’t on top (floats behind the images)
    2. how to format the list, so that
    a. text appears on hover over the bulletpoint
    b. the actual anchor (as bulletpoints I want to have “O”s) is marked strong

    It’s on my start page: http://sven-koeck.de

    #174761
    Sven

    1.: hooked it to “wp_footer” and voila!

    2.: seems more tricky to me…

    #174783
    Sven

    1. understanding now “z-index”! 🙂

    2. I changed the style (from list to words) and rotated the text 90° – but I cannot place that “menu” on the right side of the page… any ideas?

    /* define vertical menu */
    .my-handmade-vertical-menu {
        position: fixed;
        bottom: 0;
        right: 0;
        margin:0;
        padding: 0;
        width: 100%;
        color: #000;
        background-color: #fff;
        white-space:nowrap;
        z-index: 3;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); //For IE support
        writing-mode: tb-rl;
    }
    
    .my-handmade-vertical-menu a {
        display: inline;
        padding: 5px 2px;
        color: #000;
    }
    
    .my-handmade-vertical-menu a:hover {
        font-weight: bold;
        cursor: pointer;
    }

    php/wp_footer:

    <?php if ( is_front_page() ) : ?>
        <div class="my-handmade-vertical-menu">
    <a href="#focus">Mandanten</a>
    <a href="#aboutus">warum ich</a>
    <a href="#team">V-Cards</a>
    <a href="#testimonials">Kundenstimmen</a>
    <a href="#ribbonright">Bewerten</a>
    <a href="#latestnews">Aktuelles</a>
    <a href="#kontakt">Kontakt</a>
        </div>
    <?php endif; ?>
    #174857
    Tom
    Lead Developer
    Lead Developer

    Did you take it out for now? I’m not seeing it on your site.

    Let me know 🙂

    #174860
    Sven

    Took it out, because I couldn’t get it working as I wanted it… 🙁

    Added again, so you can take a look: http://sven-koeck.de

    #174966
    Tom
    Lead Developer
    Lead Developer

    Hmm I’m not too sure what you’re trying to do? Why is the text all rotated 90 degrees?

    #175047
    Sven

    I rotated the text, because I thought it would look nicer. I was wrong!

    Actual status: list of “fa fa-circle-o”s, on hover: each is replaced with text

    I try to replace the “fa fa-circle-o” with “fa fa-circle” on hover/active (as in most image sliders, only vertical not horizontal), but the script hides the “i”-class cempletely! Fiddling around… ideas?

    <?php if ( is_front_page() ) : ?>
        <div class="my-handmade-vertical-menu">
            <ul>
                <li class="top"><i class="fa fa-circle-o"></i><a href="#top">Start</a></li>
                <li class="focus"><i class="fa fa-circle-o"></i><a href="#focus">Mandanten</a></li>
                <li class="aboutus"><i class="fa fa-circle-o"></i><a href="#aboutus">warum ich</a></li>
                <li class="team"><i class="fa fa-circle-o"></i><a href="#team">E-Visitenkarten</a></li>
                <li class="testimonials"><i class="fa fa-circle-o"></i><a href="#testimonials">Kundenstimmen</a></li>
                <li class="ribbonright"><i class="fa fa-circle-o"></i><a href="#ribbonright">Bewerten sie mich</a></li>
                <li class="latestnews"><i class="fa fa-circle-o"></i><a href="#latestnews">Aktuelles</a></li>
                <li class="contact"><i class="fa fa-circle-o"></i><a href="#contact">Kontakt aufnehmen</a></li></ul>
       </div>
    <?php endif; ?>
    /* define vertical menu */
    .my-handmade-vertical-menu {
        position: fixed;
        top: 348px;
        left: -60px;
        margin: 0px;
        padding: 20px;
        width: 58px;
        color: #000;
        background-color: rgba(255, 255, 255, 0.2);
        white-space:nowrap;
        z-index: 3;
    }
    
    .my-handmade-vertical-menu a {
        display: block;
    }
    
    /* replace and re-show text in vertical menu */
    .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:hover i:before {
        content:"";
    }
    
    .my-handmade-vertical-menu ul li i{
        display: block;
    }
    .my-handmade-vertical-menu ul li:hover i{
        display: none;
    }
    .my-handmade-vertical-menu ul li a{
        display: none;
    }
    .my-handmade-vertical-menu ul li:hover a{
        display: block;
        color: #12324e;
    }
    
    #175068
    Tom
    Lead Developer
    Lead Developer

    Try this..

    .my-handmade-vertical-menu li a:before {
        font-family: FontAwesome;
        content: "\f111";
    }
    
    .my-handmade-vertical-menu li:hover a:before {
        font-family: FontAwesome;
        content: "\f10c";
    }

    Then you can completely remove the <i> element from the HTML 🙂

    #175126
    Sven

    Thank you for that piece of code!

    –> now the text appears by default… I only want to have it shown on hover!

    here’s the actual code:

    <?php if ( is_front_page() ) : ?>
        <div class="my-handmade-vertical-menu">
            <ul>
                <li class="top"><a href="#top">Start</a></li>
                <li class="focus"><a href="#focus">Mandanten</a></li>
                <li class="aboutus"><a href="#aboutus">warum ich</a></li>
                <li class="team"><a href="#team">vCards</a></li>
                <li class="testimonials"><a href="#testimonials">Kunden</a></li>
                <li class="ribbonright"><a href="#ribbonright">Bewerten</a></li>
                <li class="latestnews"><a href="#latestnews">Aktuelles</a></li>
                <li class="contact"><a href="#contact">Kontakt</a></li></ul>
       </div>
    <?php endif; ?>
    /* define vertical menu */
    .my-handmade-vertical-menu {
        position: fixed;
        bottom: 40px;
        left: -60px;
        right: 100px;
        margin: 0px;
        padding: 20px;
        width: 58px;
        color: #000;
        background-color: rgba(255, 255, 255, 0.2);
        white-space:nowrap;
        z-index: 3;
    }
    
    .my-handmade-vertical-menu a {
        display: block;
    }
    
    /* hide and reshow text in vertical menu */
    .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;
    }
    
    .my-handmade-vertical-menu ul li:hover a {
        display: block;
        color: #12324e;
    }
    
    .my-handmade-vertical-menu li a:before {
        font-family: FontAwesome;
        content: "\f111";
    }
    
    .my-handmade-vertical-menu li:hover a:before {
        font-family: FontAwesome;
        content: "\f10c";
    }
    
    #175194
    Tom
    Lead Developer
    Lead Developer

    So you only want the words to appear on hover?

    Wrap them in a span: <li class="top"><a href="#top"><span>Start</span></a></li>

    .my-handmade-vertical-menu li a span {
        display: none;
    }
    
    .my-handmade-vertical-menu li:hover a span {
        display: block;
    }
    #175203
    Sven

    with

    .my-handmade-vertical-menu li:hover a span {
        display: inline-table;
    }

    it worked exactly as I want it: http://sven-koeck.de

    THUMBS UP!!! Thank you deeply!

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