Navigation

Girls riding the electric scooters

The navigation has a logo, navigation links, and a hamburger menu button. The navigation links will not appear on viewports smaller than 1024px displaying the hamburger button instead. When the hamburger button is clicked, a navigation panel displaying the links will open.

Hamburger navigation Example

This is how it looks on small screens:

electric scooter image

Code behind Example:
<!-- add this link in head --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <!-- --> <header> <nav class="navbar"> <a href="home.html" style="width: 190px" ><img src="Images/e-scooter.svg" style="width: 120px" alt="electric scooter image" /></a> <div id="myLinks"> <a href="#">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a> <a href="#">Page 4</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </nav> </header>

Html:

header { background-color: #191b1a; overflow: hidden; width: 100%; height: max-content; position: relative; } .navbar { background-color: #191b1a; position: relative; width : 100%; } .navbar #myLinks1 { display: none; } .navbar a { padding: 3%; color: whitesmoke; text-decoration: none; font-size: 1.6rem; display: block; } .navbar a.icon { background: #191b1a; display: block; position: absolute; right: 0; top: 0; padding: 3% 5%; margin: 53px 15px; } .navbar a:hover{background-color: #FE9C00; color: black;} .navbar a:active { background-color: #FE9C00; color: black; }

Css:

function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

Java:

Navigation Example

This is how it looks on DeskTop/Big screens:

electric scooter image

Code behind Example:
<div class="navbar"> <a href="#" style="width: 190px" ><img src="Images/e-scooter.svg" style="width: 120px" alt="electric scooter image" /></a> <div id="myLinks"> <a href="#">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a> <a href="#">Page 4</a> </div> </div>

Html:

.navbar { background-color: #191b1a; position: relative; width : 100%; display: flex; justify-content: space-between; } .navbar #myLinks { display: flex; margin: 50px 18px; } .navbar a { color: whitesmoke; text-decoration: none; font-size: 1.6rem; padding: 10px 20px; display: inline; } .navbar a:hover{background-color: #FE9C00; color: black;} .navbar a:active { background-color: #FE9C00; color: black; }

Css:

Sub menu Example

Link 1 Link 2 Link 3

Code behind Example:
<div class="submenu"> <button class="submenu-btn">Submenu<i style="margin-left: 10px" class="fa fa-caret-down"></i></button> <div class="submenu-btn-link"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Html:

.submenu { position: relative; display: inline-block; } .submenu-btn { padding: 12px 24px; background-color: #191b1a; color: whitesmoke; font-size: 16px; font-weight: 600; border: none; cursor: pointer; border-radius: 0%; } .submenu-btn-link { display: none; position: absolute; background-color: #191b1a; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .submenu-btn-link a { color: whitesmoke; padding: 12px 16px; text-decoration: none; display: block; } .submenu-btn-link a:hover { background-color: whitesmoke; color: #191b1a; } .submenu:hover .submenu-btn-link {display: block;} .submenu:hover .submenu-btn {background-color: #FE9C00; color: #191b1a; }

Css:

Buttons Example


Code behind Example:
<button>Button</button>

Html:

button { background-color: #FE9C00; color: #191b1a; font-size: 2rem; border: none; border-radius: 5px; padding: 12px 24px; margin:24px; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; } button:hover{background-color: #191b1a; color: #FE9C00; } button:active { background-color: #191b1a; color: #FE9C00; }

Css:

Breadcrumbs Example

Page 1 Page 2 Page 3

Code behind Example:
<div class="breadcrumb"> <a href="#">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a> </div>

Html:

.breadcrumb { padding: 10px 16px; list-style: none; background-color: #191b1a; } .breadcrumb a { display: inline; font-size: 18px; } .breadcrumb a+a:before { padding: 8px; color: whitesmoke; content: "/\00a0"; } .breadcrumb a { color: whitesmoke; text-decoration: none; } .breadcrumb a:hover { color: #FE9C00; }

Css: