I created a mobile navigation menu which display navigation icons in the bottom of the mobile screen. I linked google icons page where I’m taking the icons. All 5 icons are displaying in the bottom of screen, however now I’m stuck and don’t have an idea how to add links of pages in the menu bar. I mean there is icon with three bar for main menu, like I want to add contact.html, blog.html, images.html in that icon. I mean whenever user click on the three bar it should display the links of these pages where user can click on of those and read. I appreciate your help.
Here is HTML code
> <!DOCTYPE html>
>
> <html>
>
> <head>
>
> <title>Mobile Bottom Navigation</title>
>
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
>
> <meta charset="utf8">
>
> <link rel="stylesheet" href="styles.css">
>
> <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
>
> rel="stylesheet">
>
> </head>
>
> <body>
>
> <div class="bottom-nav">
>
> <a href="#" class="nav-link">
>
> <i class="material-icons nav-icon">home</i>
>
> <span class="nav-text"> Home </span>
>
> </a>
>
> <a href="#" class="nav-link nav-link-active">
>
> <i class="material-icons nav-icon">message</i>
>
> <span class="nav-text"> About </span>
>
> </a>
>
> <a href="#" class="nav-link">
>
> <i class="material-icons nav-icon">create</i>
>
> <span class="nav-text"> Create Post </span>
>
> </a>
>
> <a href="#" class="nav-link">
>
> <i class="material-icons nav-icon">person</i>
>
> <span class="nav-text"> Account </span>
>
> </a>
>
> <a href="#" class="nav-link">
>
> <i class="material-icons nav-icon">menu</i>
>
> <span class="nav-text"> Menu </span>
>
> </a>
>
> </div>
>
> </body>
>
>
>
> </html>
here is CSS
body {
margin: 0 0 55px 0;
}
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0. 0. 0. 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
}
.nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav-link:hover {
background-color: #000000;
}
.nav-link-active {
color:#009578;
}
.nav-icon {
font-size: 18px;
}
