Tauheed Posted July 26, 2020 Share Posted July 26, 2020 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 the html code Quote <!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 the CSS code Quote 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now