A Pen by Juan Vargas
How do I make an a pen by juan vargas?
What is a a pen by juan vargas? How do you make a a pen by juan vargas? This script and codes were developed by Juan Vargas on 14 October 2022, Friday.
A Pen by Juan Vargas - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Juan Vargas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<body> <nav> <ul class="menu">
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#">Dropdown</a> <ul> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a> <ul> <li><a href="#">SubSubItem 1</a></li> <li><a href="#">SubSubItem 2</a></li> <li><a href="#">SubSubItem 3</a></li> <li><a href="#">SubSubItem 4</a></li> <li><a href="#">SubSubItem 5</a></li> </ul> </li> <li><a href="#">SubItem 4</a></li> <li><a href="#">SubItem 5</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Social</a></li> </ul> </nav>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Juan Vargas - Script Codes CSS Codes
body{ font-family:Arial; margin:0px; font-size:13px; margin-top:20px; background:#fafafa;
}
nav { background: lightseagreen; height:60px; width: 980px; margin:0 auto; border-radius:4px;
}
/*General*/
nav ul{ list-style:none; padding: 0; float:left;
}
.menu li{ line-height: 3rem; position: relative;
}
.menu li ul{ position: absolute;
}
nav li a{ display: block; color: #fff; padding: 6px 20px; text-decoration: none; position: relative; -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;
}
.menu.right { float:right;
}
/*First Level*/
.menu{ display: table; margin:0px;
}
.menu > li { float:left;
}
.menu > li:hover{ background:darkcyan;
}
.menu > li.dropdown > a { padding-right:25px;
}
.menu > li.dropdown > a:after{ content:''; border-top: 6px solid #ddd; border-right: 5px solid transparent; border-left: 5px solid transparent;
}
.menu > li.dropdown a:after{ content: ""; display: block; position: absolute; right: 6px; top: 27px; height: 0; width: 0;
}
/*Second Level*/
.menu li > ul{ max-height: 0; overflow: hidden; background: darkcyan; min-width: 200px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;
}
.menu li:hover > ul{ max-height: 500px; overflow: visible;
}
.menu > li > ul{ top: 100%;
}
/*Third Level*/
.menu ul ul{ top: 0; left: 100%;
}
A Pen by Juan Vargas - Script Codes JS Codes
$(".menu li").has("ul").addClass("dropdown");
Developer | Juan Vargas |
Username | juanv911 |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 2,315 Kb |
Views | 14,168 |
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 |
Unsplash API | 2,166 Kb |
OMDb API | 2,003 Kb |
Navigation Menu | 2,839 Kb |
Tumblr API - Tagged Posts | 2,096 Kb |
Foursquare API - Search Places | 1,913 Kb |
URL Favicons | 1,625 Kb |
SocialCounters - Square Buttons | 2,859 Kb |
Tumblr API posts stream | 3,852 Kb |
Question and Answer | 2,865 Kb |
SocialCounters - Rounded Buttons | 2,776 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 |
The Fly | GianlucaGuarini | 3,405 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
React Template | Isac | 1,241 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Sass random color animation | Jotavejv | 4,827 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!