Creative Grenade Navbar

Developer
Isaac
Size
1,880 Kb
Views
18,216
  1. Creative Grenade Navbar Previews
  2. Creative Grenade Navbar HTML Codes
  3. Creative Grenade Navbar CSS Codes

How do I make an creative grenade navbar?

Quite liked the navbar effect on http://creativegrenade.com/ so I thought I would see if I could do it myself. All credits to whoever did the CG site.. What is a creative grenade navbar? How do you make a creative grenade navbar? This script and codes were developed by Isaac on 30 October 2022, Sunday.

Creative Grenade Navbar Previews
IQ Test

Creative Grenade Navbar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Creative Grenade Navbar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div align="right"><ul class="nav"> <a href="/home"><li>Home</li></a> <a href="/home"><li>About</li></a> <a href="/home"><li>More</li></a> </ul></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Creative Grenade Navbar - Script Codes CSS Codes

li:hover div{ margin:0px;
}
li:before{ height:2px; content:''; width:0px; padding:0px; display:block; margin-left:30px; margin-right:30px; margin-bottom:5px; transition:500ms all ease;
}
li:after{ background:transparent; height:2px; content:''; margin-left:30px; margin-right:30px; width:0px; padding:0px; transition:500ms all ease; display:block; margin-top:5px;
}
li:hover:after,li:hover:before{ width:1px; background:rgb(79, 178, 125); padding-left:60px;
}
ul.nav{ margin:0px; padding:0px; background:#1D1F20; position:fixed; top:0;left:0;right:0; padding:15px; float:right;
}
li:hover:after{ margin:5px 0px 0px 0px;
}
li:hover:before{ margin:0px 0px 5px 0px;
}
li{ display:inline-block; padding:10px 20px; transition:500ms all ease; text-transform:uppercase; color:#111; font-weight:bold; color:rgb(79, 178, 125); font-family:sans-serif; text-align:center;
}
Creative Grenade Navbar - Script Codes
Creative Grenade Navbar - Script Codes
Home Page Home
Developer Isaac
Username graphiteisaac
Uploaded October 30, 2022
Rating 3
Size 1,880 Kb
Views 18,216
Do you need developer help for Creative Grenade Navbar?

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!

Isaac (graphiteisaac) Script Codes
Name
A simple yet functional navbar
Fully responsive top section design
Simple Sidebar with Animated Icon
Enjin friendly top section design
Television Screen in CSS3
Gallifrey-Craft Navbar
Enjin design center navbar
A simple yet functional sidebar
A Pen by Isaac
CCrama Inspired
Create amazing blog posts with AI!

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!