Menu icon Foundation
Create a navigation like this...

Hey,
I have tried it for hours with no result. How can i create a navigation like this: http://onoff-booking.de .

Greets

navigationcreatestyle

Hey,
I have tried it for hours with no result. How can i create a navigation like this: http://onoff-booking.de .

Greets

This post has been closed. No new replies can be added.

Jonas Marlo Loerken about 5 years ago

By now i got this: http://www.predatordesign.de/temp2

I have problems with the borders.

Winston Hughes about 5 years ago

Some of this is overwriting your current CSS, but you should be able to figure it out just by taking a look at your existing CSS.

.menu-item-first, .menu-item { border-bottom: 4px solid transparent; margin-bottom: -4px; }
.menu-item-first:hover, .menu-item:hover { border-bottom: 4px solid; }
.menu-item-first, .menu-item { padding: 0; }
.menu-line { padding: 0 20px; }
.top-menu li { -webkit-transition: all 0.1s ease-in-out 0s; -moz-transition: all 0.1s ease-in-out 0s; -o-transition: all 0.1s ease-in-out 0s; transition: all 0.1s ease-in-out 0s; }

Any questions, let me know.

Jonas Marlo Loerken about 5 years ago

Thank you very much! My last problem: I want to create a static border under the active link (in this case under the active li-tag).

e.g. i click on "Kontakt" and an static border appears under it. Here you can see it in the wild: http://onoff-booking.de/ueber_uns/

Steve Zeeuwe about 5 years ago

Hey Jonas,

The easiest way to do so is by giving the current 'active' menu item an .active class via either PHP or Javascript. You can then probably copy the :hover css ont the .active class.

Jonas Marlo Loerken about 5 years ago

Sorry, im a newbie so i have no idea how it works :/

Steve Zeeuwe about 5 years ago

That's okay, I can help you in the right direction if you want ;).

But first let me ask what you are trying to do, and why. As in; building a website for a company because you have to? Or just trying to learn the basics of webdesign?

If you are doing this in order to learn webdesign and web-development, I would strongly suggest to first learn the basics before starting with a framework like Foundation! If you just need results asap I will be happy to help you some with the .active class!

Jonas Marlo Loerken about 5 years ago

Thank you Steve! This navigation will be for my own website (I have a small photography business). I have experience in development. This ist not my first website, but my first complex one. This is also my first website based on a framework.

HTML & CSS isn't a problem for me, but i've never learned Javascript and PHP :/

Steve Zeeuwe about 5 years ago

Aha okey that's fine :).

I will try and help you throughout this day, but it might take a while for me to reply as I am working as well ;).

First I got a small tip for you for your css. If you hover over your first menu and the second menu item, you will notice a small difference; the underline on your first menu-item has no extra space on the left side.

You can fix this in a few ways, but I would advice the following: Remove the left-padding on the

<div class="large-12 columns">

(by using a class) and add the padding to your first menu-item (so in fact just give it the .menu-item class). Either this or just go with the extra padding on the left side, but that is a matter of taste ;). Or just ignore this all haha, it's just a small detail that would bother me personally!

Okey so as for the .active class. I personally always do it with PHP, do you think you want to try it? It will be fairly easy; we create a PHP variable on every page to store what page is currently showing, and we will give the corresponding menu-item an .active class. That's it!

You could do the same thing in javascript probably, but as I said I am more a fan of doing this in PHP.

Jonas Marlo Loerken about 5 years ago

Thank you very much! Lets do this via PHP :)

I commented the extra space on the left side by "padding: 0;" out, so this is wanted :)

Steve Zeeuwe about 5 years ago

Yeah I noticed that, but I would advice against it design-wise :). They did it like that on the other website because that way the menu (hover) aligns with the elements below. On your website this is not the case, thus the hover just looks odd to me ;). But alas, it is a matter of taste and perhaps a bit of how controlling you are when it comes to your layout.

Okey, PHP it is!

First lets look if PHP is working correctly on your server. I am not that server-savvy, so let's just see if we can do a simple PHP function; an echo, in order to find out if it's working correctly.

PHP can be executed all over your HTML pages, but in order for it to work your extension should change from (for example) index.html to index.php. This will change nothing for your html - don't worry. Also; make sure you delete the index.html on your server, otherwise the server might keep loading the index.html instead of the desired index.php.

Now, let's see if we can use php by doing an echo! An echo is nothing more than a 'print' function, let's try it by putting an echo somewhere on your index:

//Open PHP
<?php
   // use echo to show a string
   echo "Hello world!"; 
//Close PHP
?>

The // is just for the comments, no need to copy that ;). If it works correctly, you should just see 'Hello World' where you tried the echo. Let me know if it works!

Jonas Marlo Loerken about 5 years ago
Steve Zeeuwe about 5 years ago

Aha that's great!

Okey so.. let see. We need to know on what page we currently are in order to give the right menu-item the right class. This can also be done in a few ways, but as your website will be fairly simple, we will take an easy (yet good) approach :).

I am guessing the page I am seeing is index.php, and it is the page for the first menu-item 'startseite'. So what we need to do is two things:

1; store the current pagename in a PHP variable
2; echo the active class on the current page menu-item.

Step 1:

//Open PHP
<?php
   // set the variable 'currentPage' as "startseite"
   $currentPage = "startseite";
//Close PHP
?>

Now we know what the name of the current page is; startseite. You put that little piece of PHP at the top of your index.php file. You do the same for other pages, for example on your Galerie page you put $currentPage = "galerie';. Got it?

Step 2;

Now we need to echo the .active class at the corresponding menu-item, IF that menu-item belongs to the currentPage variable. In other words; IF the page is startseite, show the .active class. This is done by a simple if/else statement, whereas we only use the 'if' part now. We will put these right on the spot where want to echo the .active class, so INSIDE your menu items;

//This is the opening of the menu-item with just html
<li class="menu-item-first 

//Open PHP
<?php

    // Open up the if/else statement and fill in the condition. The '==' stands for 'equals to'.
    if($currentPage == "startseite") {

   // use echo to show the .active class
   echo "active"; 

  } // close the if/else statement, so if the condition is not true, don't do anything at all.


//Close PHP
?>

//Finish the html part
"><a href="#">Startseite</a></li>

I hope I made it clear enough; just try to make the startseite works first, and please let me know if you have any questions =).

Steve Zeeuwe about 5 years ago

Oh and of course don't forget to actually make the .active class in your css, or you won't see any difference .

Jonas Marlo Loerken about 5 years ago

Thank you so much! Problem solved!