Subtle site navigation with description
How do I make an subtle site navigation with description?
Simple navigation with a slide up effect showing a short description.. What is a subtle site navigation with description? How do you make a subtle site navigation with description? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Subtle site navigation with description - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle site navigation with description</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0;
}
body,
html { font-family: "Roboto Condensed"; font-size: 16px;
}
header { text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; padding: 0 20px; background: #f3f3f3; height: 50px; overflow: hidden; border-bottom: 1px solid #eee;
}
header .brand { font-size: 24px; line-height: 30px; padding: 10px 0; display: inline-block; font-weight: 300;
}
header .nav { font-size: 18px; display: inline-table; vertical-align: top; line-height: 16px; margin-left: 20px;
}
header .nav li { text-transform: capitalize; vertical-align: top; text-align: center; display: table-cell;
}
header .nav li a { border-top: 4px solid transparent; transition: all 0.2s ease-in-out; display: block; padding: 13px 20px 0px 20px; text-decoration: none; font-weight: 300; color: #333;
}
header .nav li small { opacity: 0; padding-top: 5px; font-size: 70%; display: block; transition: all 0.2s ease-in-out; color: #777;
}
header .nav li:hover a { border-top: 4px solid #CF3729; color: #CF3729; padding-top: 7px;
}
header .nav li:hover small { padding-top: 0px; opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <h3 class="brand"> Brand Logo </h3> <ul class="nav"> <li> <a href="#"> Home <small>Sweet home</small> </a> </li> <li> <a href="#"> Services <small>And more</small> </a> </li> <li> <a href="#"> About us <small>Our mission</small> </a> </li> <li> <a href="#"> Contact <small>Give us a call</small> </a> </li> </ul>
</header>
</body>
</html>
Subtle site navigation with description - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body,
html { font-family: "Roboto Condensed"; font-size: 16px;
}
header { text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; padding: 0 20px; background: #f3f3f3; height: 50px; overflow: hidden; border-bottom: 1px solid #eee;
}
header .brand { font-size: 24px; line-height: 30px; padding: 10px 0; display: inline-block; font-weight: 300;
}
header .nav { font-size: 18px; display: inline-table; vertical-align: top; line-height: 16px; margin-left: 20px;
}
header .nav li { text-transform: capitalize; vertical-align: top; text-align: center; display: table-cell;
}
header .nav li a { border-top: 4px solid transparent; transition: all 0.2s ease-in-out; display: block; padding: 13px 20px 0px 20px; text-decoration: none; font-weight: 300; color: #333;
}
header .nav li small { opacity: 0; padding-top: 5px; font-size: 70%; display: block; transition: all 0.2s ease-in-out; color: #777;
}
header .nav li:hover a { border-top: 4px solid #CF3729; color: #CF3729; padding-top: 7px;
}
header .nav li:hover small { padding-top: 0px; opacity: 1;
}
![Subtle site navigation with description - Script Codes](http://shots.codepen.io/necks/pen/aGmCu-512.jpg)
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 3,206 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Gallery image deck | 2,396 Kb |
Single element speech bubble | 3,191 Kb |
Moblie friendly top navbar | 3,556 Kb |
Simple fluid navigation with 4 hover effects | 3,336 Kb |
A Pen by Nick Nikolov | 1,732 Kb |
Spinning Loader | 2,273 Kb |
SVG Clock | 2,163 Kb |
60fps animated SVG waves hero | 3,268 Kb |
Checkbox | 2,493 Kb |
Progress bars with colour change. | 3,845 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
3D flipping card | Ssaakkaa | 2,238 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Resize image | Happyhj | 1,892 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!