A Pen by Jay
How do I make an a pen by jay?
What is a a pen by jay? How do you make a a pen by jay? This script and codes were developed by Jay on 14 January 2023, Saturday.
A Pen by Jay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Jay</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://drgdaniel.com/public/default/resources/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- MOBILE MAIN MENU -->
<div class="mobileMainMenu" id="rightMenuPanel"> <ul class="side-nav"> <li class="navTitle"><span>Main Menu</span></li> <li class="has-dropdown"> <a href="#">About</a> <ul class="dropdown"> <li><a href="{url path="profile/index"}">Biography</a></li> <li><a href="{url path="aesthetic/index"}">Our Team</a></li> <li><a href="{url path="technology/index"}">Facilities</a></li> </ul> </li> <li class="has-dropdown"> <a href="#">Holistic Center</a> <ul class="dropdown"> <li><a href="{url path="education/index"}">What is Holistic?</a></li> <li><a href="{url path="cases/index"}">Dental Cases</a></li> </ul> </li> <li class="has-dropdown"> <a href="#">News & Events</a> <ul class="dropdown"> <li><a href="{url path="news/index"}">News</a></li> <li><a href="{url path="events/index"}">Events</a></li> </ul> </li> <li><a href="{url path="services/index"}">Dental Treatments</a></li> <li><a href="{url path="contactUs/index"}">Contact Us</a></li> </ul>
</div>
<!-- END OF MOBILE MAIN MENU -->
<div class="body"> <!-- HEADER --> <div class="headerFixedWrapper"> <div class="headerWrapper first"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="logoWrapper"> <a href="{url path="home/index"}" class="logo text-center"> <img src="{public_url path="images/logo.png"}" /> </a> </li> </ul> <section class="top-bar-section right hide-if-mobile"> <ul class="right"> <li><a href="https://facebook.com/{$clientConfig.facebook}"><i class="icon fb"></i></a></li> <li><a href="https://twitter.com/{$clientConfig.twitter}"><i class="icon twitter"></i></a></li> <li><a href="mailto:{$clientConfig.email}"><i class="icon email"></i></a></li> <li><a href="tel:{$clientConfig.phoneNumber}"><i class="icon phone"></i> {$clientConfig.phoneNumber}</a></li> <li><a href="{url path="contactUs/schedule"}" data-revealid="scheduleModal" data-manual-reveal class="buttonPractice">View Daily Practice</a></li> </ul> </section> <section class="top-bar-section right show-if-mobile"> <ul class="right"> <li class="text-center"><a href="#" id="btnRightPanel"><i class="icon view"></i></a></li> </ul> </section> </nav> </div> <div class="headerWrapper second hide-if-mobile"> <nav class="top-bar mainMenu" data-topbar> <section class="top-bar-section right"> <ul class="right"> {if empty($selectedMainMenu)}{$selectedMainMenu = ""}{/if} <li class="has-dropdown{if $selectedMainMenu == "about"} active{/if}"> <a href="#">About</a> <ul class="dropdown"> <li><a href="{url path="profile/index"}">Biography</a></li> <li><a href="{url path="aesthetic/index"}">Our Team</a></li> <li><a href="{url path="technology/index"}">Facilities</a></li> </ul> </li> <li class="has-dropdown{if $selectedMainMenu == "holistic"} active{/if}"> <a href="#">Holistic Center</a> <ul class="dropdown"> <li><a href="{url path="education/index"}">What is Holistic?</a></li> <li><a href="{url path="cases/index"}">Dental Cases</a></li> </ul> </li> <li class="has-dropdown{if $selectedMainMenu == "news"} active{/if}"> <a href="#">News & Events</a> <ul class="dropdown"> <li><a href="{url path="news/index"}">News</a></li> <li><a href="{url path="events/index"}">Events</a></li> </ul> </li> <li class="{if $selectedMainMenu == "services"} active{/if}"><a href="{url path="services/index"}">Dental Treatments</a></li> <li class="{if $selectedMainMenu == "contact"} active{/if}"><a href="{url path="contactUs/index"}">Contact Us</a></li> </ul> </section> </nav> </div> </div> <!--END OF HEADER--> <!--CONTENT--> <div class="contentWrapper"> <!--page content--> {block name="content"}{/block} </div>
</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 Jay - Script Codes CSS Codes
nav.top-bar #btnRightPanel { width: 40px; height: 100%; display: inline-block; line-height: 40px;
}
.mobileMainMenu { position: fixed; top: 0; bottom: 0; right: 0; background: url('/images/bg-mobileMainMenu.jpg') repeat; width: 250px; z-index: 0;
}
.mobileMainMenu .side-nav { font-family: Arial; padding-top: 0;
}
.mobileMainMenu .side-nav .dropdown { list-style: none; padding: 0 0 0 30px; margin: 0; height: auto; max-height: 0; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden;
}
.mobileMainMenu .side-nav .dropdown li { padding: 5px 0px 5px 15px;
}
.mobileMainMenu .side-nav .dropdown li a { padding: 0;
}
.mobileMainMenu .side-nav li * { color: #000; padding: 15px 25px; text-decoration: none;
}
.mobileMainMenu .side-nav li.navTitle { border-bottom: solid 1px #666; line-height: 40px; height: 40px; box-shadow: 0px 1px 0px #FFFFFF;
}
.mobileMainMenu .side-nav li.navTitle span { font-family: Arial; font-style: italic;
}
.mobileMainMenu .side-nav li.has-dropdown.active a { font-family: Arial;
}
.mobileMainMenu .side-nav li.has-dropdown.active ul { max-height: 1000px;
}
A Pen by Jay - Script Codes JS Codes
$("#btnRightPanel").click(function(){ $(".body").toggleClass("shifted"); });

Developer | Jay |
Username | jaycode |
Uploaded | January 14, 2023 |
Rating | 3 |
Size | 3,784 Kb |
Views | 8,092 |
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 |
Wait until all interchange images loaded | 2,335 Kb |
Bare Necessity Horizontal Accordion | 2,964 Kb |
Hover with css triangle as transparent arrow | 2,460 Kb |
Smoothwheel | 2,660 Kb |
Is Mobile | 1,557 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 |
Yuliya v krylova | Rafszul | 37,351 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Welcome | Nakome | 6,076 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Lecture 1 | Law | 0 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Button shaking | SusanneLundblad | 2,227 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!