[Resolved] Vertical navigation in sections?

[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 8 years, 2 months ago by Tom.

[Tom]

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 🙂

[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?

[Tom]

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 🙂

[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

[Sven]

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

2.: seems more tricky to me…

[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; ?>

[Tom]

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

Let me know 🙂

[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

[Tom]

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

[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;
}

[Tom]

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 🙂

[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";
}

[Tom]

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;
}

[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!

[Author]

Posts