Casexmode_nav2
How do I make an casexmode_nav2?
What is a casexmode_nav2? How do you make a casexmode_nav2? This script and codes were developed by Ben Song on 05 November 2022, Saturday.
Casexmode_nav2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>casexmode_nav2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" media="all" href="ebay_nav.css" />
<div class="navcontainer">
<nav> <div id="logo"> <img src="http://ninepanda.com/xmode/images/logo.png"></div> <label for="drop" class="navtoggle"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="35px"></label> <input type="checkbox" id="drop" /> <ul class="menu"> <li class="dropdown"> <!-- First Tier Drop Down --> <label for="drop-1" class="toggle">Phone +</label> <a href="#">Shop by Phone</a> <input type="checkbox" id="drop-1"/> <ul id="limheight"> <li><a href="http://stores.ebay.com/casesity/Alcatel-/_i.html?_fsub=4928199012&_sid=974019352&_trksid=p4634.c0.m322">Alcatel</a></li> <li><a href="http://stores.ebay.com/casesity/Amazon-/_i.html?_fsub=3374407012&_sid=974019352&_trksid=p4634.c0.m322">Amazon</a></li> <li><a href="http://stores.ebay.com/casesity/Apple-/_i.html?_fsub=2494419012&_sid=974019352&_trksid=p4634.c0.m322">Apple</a></li> <li><a href="#">Blackberry</a></li> <li><a href="#">Coolpad</a></li> <li><a href="#">HTC</a></li> <li><a href="#">Huawei</a></li> <li><a href="#">Kyocera</a></li> <li><a href="#">LG</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">Nokia</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">Sharp</a></li> <li><a href="#">Sony</a></li> <li><a href="#">ZTE</a></li> <li><a href="#">Various</a></li> </ul> </li> <li class="dropdown"> <!-- First Tier Drop Down --> <label for="drop-2" class="toggle">Tempered Glass +</label> <a href="#">Tempered Glass</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Portfolio 1</a></li> <li><a href="#">Portfolio 2</a></li> <li> <!-- Second Tier Drop Down --> <label for="drop-3" class="toggle">Works +</label> <a href="#">Works</a> <input type="checkbox" id="drop-3"/> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Python</a></li> </ul> </li> </ul> </li> <li class="dropdown"><a href="#">About Us</a></li> <li class="dropdown"><a href="#">Feedback</a></li> <li class="dropdown"><a href="#">Contact</a></li> </ul>
</nav>
</div>
</body>
</html>
Casexmode_nav2 - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=roboto);
body{margin: 0px;}
h1 { font-size: 60px; text-align: center; color: #FFF;
}
h3 { font-size: 30px; line-height: 34px; text-align: center; color: #FFF;
}
h3 a { color: #FFF; }
a { color: #FFF; }
h1 { margin-top: 100px; text-align: center; font-size: 60px; line-height: 70px; font-family: 'roboto', sans-serif;
}
#container { margin: 0 auto; max-width: 890px;
}
p { text-align: center; } .navtoggle,.toggle, [id^=drop] { display: none;
}
.navcontainer{background: url(http://ninepanda.com/xmode/images/header_navbg.gif); height: 80px; border-top:#3db9e4 solid 4px; z-index:99999; position: absolute; /*newly added*/ top: 0px;/*newly added*/ width:100%; zoom:90%;
}
nav { margin: 0 auto; padding: 0; max-width:1200px;
}
#logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; margin-top:4px;
}
nav:after { content: ""; display: table; clear: both;
}
nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative;
}
nav ul li { margin: 0px; display: inline-block; float: left; xbackground-color: #254441; color: #8f8f8f; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; font-weight: bold; xbackground: #e7e8e9; xborder-left: 1px solid #bcbdbc; -ms-transform: skewX(0deg); /* IE 9 */ -webkit-transform: skewX(0deg); /* Safari */ transform: skewX(0deg); border-radius: 4px;
}
nav ul li.dropdown{ margin-top: 15px;}
nav li{ position: relative;
}
nav li a { display: block; position: relative; padding: 10px 20px; color: #0088CC; font-size: 15px; text-decoration: none;
}
.nav > li > a:hover,
.nav > li > a:focus { text-decoration: none; background-color: #eee;
}
.dropdown > li.active > a,
.dropdown > li.active > a:hover,
.dropdown > li.active > a:focus { color: #fff; background-color: #337ab7;
}
nav ul li ul li:hover { background: #000000; }
nav a:hover{ background: #3db9e4; color: #FFF; border-radius: 4px
}
nav li:hover a { background: #3db9e4; color: #FFF; border-radius: 4px
}
nav li li a:hover{ color: #3db9e4; background-color: #FFF;
}
nav ul ul { display: none; position: absolute; top: 36px; background: #3db9e4;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li { width: 270px; float: none; display: list-item; position: relative;
}
nav ul ul ul li { position: relative; top: -66px; left: 170px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#limheight { font-size: 0px; max-height: 500px; /*your fixed height*/ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li { display: inline-block; /*necessary*/ width:200px; font-size: 16px;
}
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo { display: block; padding: 0; width: 100%; text-align: center; float: none;
}
nav { margin: 0; }
#limheight { max-height:830px; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li { display: inline-block; /*necessary*/ height: 20px; width:100%;
}
.toggle + a, .navtoggle + a, .menu { display: none; }
.navtoggle {margin-top:-48px; display: block; background-color: ; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none; float:right; }
.toggle { display: block; background-color: #3db9e4; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none;
}
.toggle:hover { background-color: #000000; }
[id^=drop]:checked + ul { display: block; }
nav ul li { display: block; width: 100%;
}
nav ul ul .toggle, nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover, nav ul ul ul a { background-color: #000000; }
nav ul li ul li .toggle, nav ul ul a { background-color: #212121; }
nav ul ul { float: none; position: static; color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li { display: block; width: 100%;
}
nav ul ul ul li { position: static;
}
}
@media all and (max-width : 330px) {
nav ul li { display: block; width: 94%;
}
}
@media (min-width: 992px) { .navcontainer nav > ul > li.dropdown #limheight li a, .navcontainer nav > ul > li.dropdown .dropdown-mega-sub-nav li a { -webkit-transition: margin-top 0.2s ease; -moz-transition: margin-top 0.2s ease; transition: margin-top 0.2s ease; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; margin-top: -10px; } .navcontainer nav > ul > li.dropdown:hover > #limheight li a, .navcontainer nav > ul > li.dropdown:hover .dropdown-mega-sub-nav li a { margin-top: 0; }
}
Developer | Ben Song |
Username | speedz55 |
Uploaded | November 05, 2022 |
Rating | 3 |
Size | 3,501 Kb |
Views | 12,144 |
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 |
Raidentechsite_addon_style.js | 2,187 Kb |
Casexmode_footer | 3,088 Kb |
Ebay_tabsample | 1,807 Kb |
Ebay_nojs_picgallery | 2,053 Kb |
NitroRCX-scalenav | 2,046 Kb |
Casexmode_nav3 | 3,406 Kb |
Auctiva_casexmode_template2 | 9,123 Kb |
Xmode_ebaytop | 7,579 Kb |
Auctiva_ebay_casexmode | 9,933 Kb |
Ebay_imageslide | 2,290 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 |
Find The Penguin | Lelder | 2,212 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Weather Icons | Gtalin | 2,519 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 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!