Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More
Home
css
frontend

Micro Nav Bar UI design using HTML & CSS

4 min read

 


Hello readers! today, in this blog, you'll learn to create a small prototype of navigation bar. I have just created a small version but you may extend it according to your requirements. This nav bar has a very simple look and has floating text hover on it's icon.

A navigation bar or navigation link list is a list of important links to using which users may navigate into your website without any problem. For example, in the navigation bar, which we are going to create today, there is a list of four links; 

  • Home
  • Profile
  • Settings
  • Bag
It means you can navigate to these pages of your website by just clicking on them. For an instance, if you'll click on Profile icon then you'll be redirected to the profile page of the website.
Thus, navigation bar plays a very important role in the user experience of your website and having a good design of it also very important.

If you have any query you may ask in the comment box, I'll reply to it as soon as possible.

I have also provided the link of codepen in the end of this tutorial for making your task more easier.✌

You can Also download the source code files by clicking on download button given in the end of this tutorial.

Video preview of project:




Source code for the project

To create this design you'll have to create two files namely index.html and style.css (Both should be in same directory).  Please ensure that you have used correct extensions, i.e. .html and .css

Below is the code you need to copy in index.html file


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Nav Bar Micro Interaction </title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="navbar">
  <li class="list-item"><i class="fa-solid fa-house"></i>
    <span class="list-item-name">Home</span>
  </li>
  <li class="list-item">
    <i class="fa-solid fa-user"></i>
    <span class="list-item-name">Profile</span>
  </li>
  <li class="list-item">
    <i class="fa-solid fa-gear"></i>
    <span class="list-item-name">Settings</span>
  </li>
  <li class="list-item">
    <i class="fa-solid fa-bag-shopping"></i>
    <span class="list-item-name">Bag</span>
  </li>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>


Then copy the below code in style.css file


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap");

:root {
  --highlight: #5756e6;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #a4b1e6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Inter", sans-serif;
}

.navbar {
  border-radius: 32px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 14px 28px #8f9cd4, 0 10px 10px #8f9cd4;
}

.list-item {
  list-style-type: none;
  flex-basis: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #555;
  transform: translateY(0);
  transition: transform 0.5s ease, opacity 0.2s ease;
  cursor: pointer;
}

.list-item-name {
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  transform: translate(0, 50px);
  transition: transform 0.5s ease, opacity 0.2s ease;
  opacity: 0;
}

.list-item:hover {
  color: var(--highlight);
  transform: translateY(-6px);
  .list-item-name {
    transform: translateY(20px);
    opacity: 1;
  }
}

@media (max-width: 350px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    max-width: 120px;
    padding-bottom: 20px;
  }

  .list-item {
    flex-basis: auto;
  }

  .list-item:hover {
    .list-item-name {
      transform: translateY(25px);
    }
  }
}


And done you have successfully created this design. To view this all you need to do is to double click the index.html file and it will get open into your working browser.👍




License
___________________________________________________________________________________

The MIT License (MIT)

Copyright (c) 2022 by Aaditya1612 (https://codepen.io/aaditya1612/pen/WNMmQZb)
Fork of an original work Nav Bar Micro Interaction  (https://codepen.io/sashatran/pen/abqXVvy)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

___________________________________________________________________________________
Labels : #css ,#frontend ,#html ,#web dev ,

Post a Comment