Navbar Design
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop down Menu</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<nav class="flex">
<div class="logo">
<h1>Siddharth</h1>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li>
<a href="#">Projects
<ion-icon name="caret-down-outline"></ion-icon>
</a>
<ul>
<li><a href="#">Hover Effect</a></li>
<li><a href="#">3d Flip card</a></li>
<li><a href="#">Loder</a></li>
<li><a href="#">Digital clock</a></li>
<li><a href="#">CSS-3 Slider</a></li>
<li><a href="#">Game</a></li>
</ul>
</li>
<li>
<a href="#">Web Development
<ion-icon name="caret-down-outline"></ion-icon>
</a>
<ul>
<li>
<a href="#">Front End
<ion-icon name="caret-forward-outline"></ion-icon>
</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
</li>
<li>
<a href="#">Back End
<ion-icon name="caret-forward-outline"></ion-icon>
</a>
<ul>
<li><a href="#">Node.js</a></li>
<li><a href="#">Mongo.db</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Anek+Odia:wght@300&family=Baloo+Bhai+2&family=Baloo+Chettan+2&family=Bebas+Neue&family=Bree+Serif&family=Convergence&family=Dancing+Script&family=Dosis:wght@400;500;600;700&family=Lato:wght@100&family=Montserrat:wght@400;500;600;700&family=Playfair+Display&family=Ramaraja&family=Roboto+Condensed&family=Roboto:wght@100;300;400;500;700&family=Sofia+Sans+Condensed&family=Ubuntu:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
font-family: 'Sofia Sans Condensed', sans-serif;
overflow-x: hidden
;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container {
width: 100%;
height: 100vh;
background-image: url(../img/mountains-g50890940b_1920.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
nav .logo {
font-size: 1.5rem;
color: #fff;
font-weight: bold;
line-height: 5rem;
padding-left: 2.5rem;
cursor: pointer;
}
nav {
height: 5rem;
background-color: #063247;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.4);
opacity: 0.6;
}
nav ul {
margin-right: 3.5rem;
/* position: relative; */
}
nav ul li {
display: inline-block;
}
nav ul li:hover > ul {
top: 5rem;
opacity: 1;
visibility: visible;
transition: .3s linear;
}
nav ul li a {
color: #fff;
display: block;
padding: 0 1rem;
line-height: 5rem;
font-size: 1rem;
background: #063247;
transition: .2s;
}
nav ul li a:hover {
color: #23dbdb;
}
nav ul ul {
position: absolute;
top: 5.5rem;
border-top: 3px solid #23dbdb;
opacity: 0;
visibility: hidden;
}
nav ul ul li {
width: 10rem;
display: list-item;
position: relative;
border: 1px solid #042331;
border-top: none;
}
nav ul ul li a {
line-height: 3rem;
}
nav ul ul li:hover > a {
color: #23dbdb;
}
nav ul ul ul {
border-top: none;
}
nav ul ul ul li {
position: relative;
top: -5rem;
left: 10rem;
}
0 Comments