A Pen by gavra
How do I make an a pen by gavra?
What is a a pen by gavra? How do you make a a pen by gavra? This script and codes were developed by Gavra on 20 November 2022, Sunday.
A Pen by gavra - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by gavra</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="accordian"> <ul> <li> <h3><span class="icon-dashboard"></span>Dashboard</h3> <ul> <li><i class="icon-angle-right"></i> <a href="#">Reports</a></li> <li><i class="icon-angle-right"></i> <a href="#">Search</a></li> <li><i class="icon-angle-right"></i> <a href="#">Graphs</a></li> <li><i class="icon-angle-right"></i> <a href="#">Settings</a></li> </ul> </li> <!-- we will keep this LI open by default -- > <li class="active"> --> <li> <h3><span class="icon-tasks"></span>Tasks</h3> <ul> <li><a href="#">Today's tasks</a></li> <li><a href="#">Urgent</a></li> <li><a href="#">Overdues</a></li> <li><a href="#">Recurring</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-calendar"></span>Calendar</h3> <ul> <li> <a href="#">Current Month</a></li> <li><a href="#">Current Week</a></li> <li><a href="#">Previous Month</a></li> <li><a href="#">Previous Week</a></li> <li><a href="#">Next Month</a></li> <li><a href="#">Next Week</a></li> <li><a href="#">Team Calendar</a></li> <li><a href="#">Private Calendar</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><span class="icon-heart"></span>Favourites</h3> <ul> <li><a href="#">Global favs</a></li> <li><a href="#">My favs</a></li> <li><a href="#">Team favs</a></li> <li><a href="#">Settings</a></li> </ul> </li> </ul>
</div> <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 gavra - Script Codes CSS Codes
/*custom font for text*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: https://fortawesome.github.io/Font-Awesome/ */
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
/*Basic reset*/
* {margin: 0; padding: 0;}
body { background: #1f2628; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#accordian { background: #1b2224; width: 250px; /*margin: 100px auto 0 auto;*/ color: #757575; /*Some cool shadow and glow effect* / box-shadow: 0 0px 10px 10px rgba(255, 255, 255, 0.04); */
}
/*heading styles*/
#accordian h3 {
font-size: 14px;
line-height: 38px;
padding: 0 10px;
cursor: pointer;
background: #282f31;
border-top: 1px solid rgba(0,0,0,1);
border-color: rgba(255,255,255,0.05);
letter-spacing: 2px;
padding: 4px;
padding: 0 60px;
}
/*heading hover effect*/
#accordian h3:hover { background: rgba(255,255,255,0.05);
}
/*iconfont styles*/
#accordian h3 span { font-size: 16px; padding: 10px 30px 11px 20px; margin: 0px 0px 0px -66px; width: 0px; border-right: 1px solid rgba(68, 68, 68, 0.4); position: absolute;
}
#accordian h3:hover span{ background:#1b2224;
}
/*list items*/
#accordian li { list-style-type: none;
}
/*iconfont styles*/
/*links*/
#accordian ul ul li a { color: #757575; text-decoration: none; font-size: 14px; line-height: 40px; display: block; padding: 0 60px; /*transition for smooth hover animation* / transition: all 0.15s;*/ border-top: 1px solid rgba(0,0,0,1); border-color: rgba(255,255,255,0.05);
}
/*hover effect on links*/
#accordian ul ul li a:hover { border-left:2px solid rgba(255,255,255,0.05); background-color: rgba(0, 0, 0, 0.05) !important;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul { display: none;
}
#accordian li.active ul { display: block;
}
[class^="icon-"], [class*=" icon-"] { float: left; font-size: 16px; margin: 12px 0 0 24px;
}
A Pen by gavra - Script Codes JS Codes
/*jQuery time*/
$(document).ready(function(){ $("#accordian h3").click(function(){ //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } })
})
Developer | Gavra |
Username | gavra |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 2,990 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 |
Cool menu.. | 2,542 Kb |
Moving colors | 3,037 Kb |
Nice scroll | 1,696 Kb |
404 PAGE NOT FOUND | 3,803 Kb |
Prvobitan razvoj | 3,186 Kb |
Improve | 1,652 Kb |
Timer | 1,881 Kb |
Show content in a full-screen slide | 4,052 Kb |
Scrollup | 1,963 Kb |
This webpage is not available | 1,704 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 |
Sketchy Box | Mnicpt | 3,033 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Formations | Cantelope | 5,731 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 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!