• Locked
No replies
Thu, 2020-07-30 04:57
libra85
libra85's picture
Offline
newbie
Last seen: 2 years 34 weeks ago
Timezone: GMT-7
Joined: 2020-07-30
Posts: 1
Points: 2

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="index.html" class="nav-link">
<i class="material-icons nav-icon">home</i>
<span class="nav-text"> Home </span>
</a>
<a href="about.html" class="nav-link nav-link-active">
<i class="material-icons nav-icon">message</i>
<span class="nav-text"> About </span>
</a>
<a href="create.html" class="nav-link">
<i class="material-icons nav-icon">create</i>
<span class="nav-text"> Create Post </span>
</a>
<a href="account.html" 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 codes

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

Top
Tags: