Cara Membuat Menu Dropdown Responsive dengan tambahan Font Awesome
Screenshoot Tampilan PC/Dekstop Menu Dropdown Responsive + Font Awesome
Kode Font Awesome
<link href='http://dl.dropboxusercontent.com/u/87795241/seosipintar/font-awesome.css' rel='stylesheet' type='text/css'/>
Kode HTML:
<ul id="responsive" class="responsive">
<!-- home -->
<li>
<a href="#"><i class="icon-home"></i>Home</a>
</li>
<!--/ home -->
<!-- about -->
<li class="dropdown">
<a href="#" class="active"><i class="icon-star"></i>About</a><b></b>
<div class="grid-container3">
<ul>
<li class="dropdown">
<a href="#" class="active"><i class="icon-bullhorn"></i>News</a>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="icon-ok"></i>Company</a></li>
<li><a href="#"><i class="icon-ok"></i>Products</a></li>
<li><a href="#"><i class="icon-ok"></i>Specials</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="icon-globe"></i>Mission</a></li>
<li class="dropdown">
<a href="#"><i class="icon-group"></i><b></b>Our Team</a>
<div class="grid-container3">
<ul>
<li class="dropdown">
<a href="#">Markus Fisher</a>
<div class="grid-container3">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a href="#">Leyla Sparks</a>
<div class="grid-container3">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</li>
<li><a href="#">Gleb Ismailov</a></li>
<li><a href="#">Viktoria Gibbers</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="icon-trophy"></i>Rewards</a></li>
<li><a href="#"><i class="icon-certificate"></i>Certificates</a></li>
</ul>
</div>
</li>
<!--/ about -->
<!-- portfolio -->
<li class="dropdown">
<a href="#"><i class="icon-briefcase"></i>Portfolio</a><b></b>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="icon-lemon"></i>Logos</a></li>
<li><a href="#"><i class="icon-globe"></i>Websites</a></li>
<li><a href="#"><i class="icon-th-large"></i>Branding</a></li>
<li><a href="#"><i class="icon-picture"></i>Illustrations</a></li>
</ul>
</div>
</li>
<!--/ portfolio -->
<!-- contacts -->
<li>
<a href="#"><i class="icon-phone"></i>Contacts</a><b></b>
</li>
<!--/ contacts -->
<!-- share -->
<li class="right dropdown">
<a href="#"><i class="icon-bullhorn"></i>Share</a><b></b>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="icon-twitter"></i>Twitter</a></li>
<li><a href="#"><i class="icon-facebook-sign"></i>Facebook</a></li>
<li><a href="#"><i class="icon-pinterest"></i>Pinterest</a></li>
<li><a href="#"><i class="icon-envelope-alt"></i>Email</a></li>
</ul>
</div>
</li>
<!--/ share -->
<!-- pin or unpin -->
<li class="right">
<a href="#" onclick="getElementById('responsive').className = (getElementById('responsive').className == 'responsive' ? 'responsive responsive-fixed' : 'responsive'); return false;"><i class="icon-pushpin"></i>Pin/Unpin</a>
</li>
<!--/ pin or unpin -->
</ul>
Kode CSS:
/**/
/* reset */
/**/
.responsive {
margin: 0;
padding: 0;
border: 0;
}
.responsive * {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
/**/
/* level 1 */
/**/
.responsive {
position: relative;
box-shadow: 0 0 3px #999;
font-size: 0;
line-height: 0;
text-align: right;
}
.responsive-fixed {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
border-radius: 0;
}
.responsive:after {
content: '';
display: table;
clear: both;
}
.responsive li {
position: relative;
display: inline-block;
float: left;
padding: 1px;
border-style: solid;
border-right-width: 1px;
text-align: left;
}
.responsive a {
position: relative;
display: block;
padding: 0 19px;
text-decoration: none;
}
.responsive i {
display: block;
float: left;
margin-right: 7px;
font-family: FontAwesome;
font-style: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
.responsive li:first-child {
border-radius: 5px 0 0 5px;
}
.responsive li:first-child > a {
border-radius: 4px 0 0 4px;
}
.responsive li:last-child {
border-radius: 0 5px 5px 0;
}
.responsive li:last-child > a {
border-radius: 0 4px 4px 0;
}
.responsive .dropdown > a {
padding-right: 30px;
}
.responsive .dropdown > a:after {
content: '';
position: absolute;
top: 50%;
right: 20px;
width: 0;
height: 0;
margin-top: -1px;
border-top: 4px solid #a6a6a6;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
}
.responsive .dropdown > b {
content: '';
position: absolute;
z-index: 1001;
top: 100%;
left: -9999px;
width: 100%;
height: 6px;
opacity: 0;
transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
}
.responsive .dropdown > div {
position: absolute;
z-index: 1000;
top: 100%;
left: -9999px;
margin-top: 6px;
border-radius: 0 5px 5px 5px;
box-shadow: 0 0 6px rgba(76,76,76,0.25);
opacity: 0;
transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
}
.responsive .dropdown:hover > b {
left: 0;
opacity: 1;
}
.responsive .dropdown:hover > div {
left: 0;
opacity: 1;
}
.responsive .dropdown:first-child:hover {
border-radius: 5px 0 0 0;
}
.responsive .dropdown:first-child:hover > a {
border-radius: 4px 0 0 0;
}
.responsive .dropdown:last-child:hover {
border-radius: 0 5px 0 0;
}
.responsive .dropdown:last-child:hover > a {
border-radius: 0 4px 0 0;
}
/**/
/* level 2 */
/**/
.responsive ul li {
display: block;
float: none;
border-top-width: 1px;
border-right-width: 0;
}
.responsive ul li:first-child {
border-top: 0;
border-radius: 0 5px 0 0;
}
.responsive ul li:first-child > a {
border-radius: 0 4px 0 0;
}
.responsive ul li:last-child {
border-radius: 0 0 5px 5px;
}
.responsive ul li:last-child a {
border-radius: 0 0 4px 4px;
}
.responsive ul .dropdown > b {
display: none;
}
.responsive ul .dropdown > div {
top: 22px;
margin-left: -30px;
border-radius: 5px;
}
.responsive ul .dropdown:hover > div {
left: 100%;
}
.responsive ul .dropdown:first-child:hover {
border-radius: 0 5px 0 0;
}
.responsive ul .dropdown:first-child:hover > a {
border-radius: 0 4px 0 0;
}
.responsive ul .dropdown:last-child:hover {
border-radius: 0 0 5px 5px;
}
.responsive ul .dropdown:last-child:hover > a {
border-radius: 0 0 4px 4px;
}
/**/
/* level 3+ */
/**/
.responsive ul ul li:first-child {
border-radius: 5px 5px 0 0;
}
.responsive ul ul li:first-child > a {
border-radius: 4px 4px 0 0;
}
.responsive ul ul .dropdown:first-child:hover {
border-radius: 5px 5px 0 0;
}
.responsive ul ul .dropdown:first-child:hover > a {
border-radius: 4px 4px 0 0;
}
/**/
/* right alignment */
/**/
.responsive .right {
float: none;
border-right-width: 0;
border-left-width: 1px;
}
.responsive .right.dropdown > div {
border-radius: 5px 0 5px 5px;
}
.responsive .right.dropdown:hover > div {
right: 0;
left: auto;
}
.responsive .right ul li:first-child {
border-radius: 5px 0 0 0;
}
.responsive .right ul li:first-child > a {
border-radius: 4px 0 0 0;
}
/**/
/* grid */
/**/
.responsive .grid-column {
float: left;
border-left-width: 1px;
border-left-style: solid;
}
.responsive .grid-column:first-child {
margin-left: 0;
border-left: 0;
}
.responsive .grid-column2,
.responsive .grid-container2 {
width: 155px;
}
.responsive .grid-column3,
.responsive .grid-container3 {
width: 233px;
}
.responsive .grid-column4,
.responsive .grid-container4 {
width: 311px;
}
.responsive .grid-column5,
.responsive .grid-container5 {
width: 389px;
}
.responsive .grid-column6,
.responsive .grid-container6 {
width: 467px;
}
.responsive .grid-column7,
.responsive .grid-container7 {
width: 545px;
}
.responsive .grid-column8,
.responsive .grid-container8 {
width: 623px;
}
.responsive .grid-column9,
.responsive .grid-container9 {
width: 701px;
}
.responsive .grid-column10,
.responsive .grid-container10 {
width: 779px;
}
.responsive .grid-column11,
.responsive .grid-container11 {
width: 857px;
}
.responsive .grid-column12,
.responsive .grid-container12 {
width: 935px;
}
.responsive .grid-column ul li:first-child,
.responsive .grid-column ul li:first-child > a,
.responsive .grid-column ul li:last-child,
.responsive .grid-column ul li:last-child > a {
border-radius: 0;
}
.responsive .grid-column:first-child ul li:last-child {
border-bottom-left-radius: 5px;
}
.responsive .grid-column:first-child ul li:last-child > a {
border-bottom-left-radius: 4px;
}
.responsive .grid-column:last-child ul li:first-child {
border-top-right-radius: 5px;
}
.responsive .grid-column:last-child ul li:first-child > a {
border-top-right-radius: 4px;
}
.responsive .grid-column:last-child ul li:last-child {
border-bottom-right-radius: 5px;
}
.responsive .grid-column:last-child ul li:last-child > a {
border-bottom-right-radius: 4px;
}
.responsive .right .grid-column:first-child ul li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 0;
}
.responsive .right .grid-column:first-child ul li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 0;
}
.responsive .right .grid-column:last-child ul li:first-child {
border-radius: 0;
}
.responsive .right .grid-column:last-child ul li:first-child > a {
border-radius: 0;
}
/**/
/* collapsable */
/**/
.responsive-collapsable .opener {
display: none;
}
/*----------------------------------------------------------------------------*/
/* FORMS */
/*----------------------------------------------------------------------------*/
.responsive :-moz-placeholder {
color: #ccc;
}
.responsive ::-moz-placeholder {
color: #ccc;
}
.responsive :-ms-input-placeholder {
color: #ccc;
}
.responsive ::-webkit-input-placeholder {
color: #ccc;
}
.responsive form {
padding: 20px 20px 10px;
text-align: right;
}
.responsive form:after {
content: '';
display: table;
clear: both;
}
.responsive form a {
display: block;
float: right;
margin-right: 20px;
padding: 0;
text-decoration: underline;
font-size: 12px;
line-height: 34px;
}
.responsive form a:hover {
background: none;
text-decoration: none;
}
.responsive input,
.responsive textarea,
.responsive button {
display: block;
width: 100%;
height: 34px;
margin-bottom: 10px;
padding: 7px 10px 7px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #f2f2f2;
font-size: 13px;
line-height: 18px;
color: #404040;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.responsive input:focus,
.responsive textarea:focus {
border: 1px solid rgba(0,0,0,0.3);
background: #fff;
}
.responsive textarea {
height: 90px;
resize: none;
}
.responsive button {
position: relative;
display: block;
float: right;
width: auto;
margin-bottom: 10px;
padding: 0 20px;
font-size: 14px;
line-height: 32px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
.responsive button:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
background-image: linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -o-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -ms-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -moz-linear-gradient(bottom, #000 0%, #fff 100%);
background-image: -webkit-linear-gradient(bottom, #000 0%, #fff 100%);
opacity: 0.15;
}
.responsive button::-moz-focus-inner {
border: none;
}
/*----------------------------------------------------------------------------*/
/* RESPONSIVENESS */
/*----------------------------------------------------------------------------*/
/**/
/* wide */
/**/
@media screen and (min-width: 1240px) {
.page {
width: 1200px;
}
}
/**/
/* pad */
/**/
@media screen and (max-width: 980px) {
.responsive .grid-column2,
.responsive .grid-container2 {
width: 117px;
}
.responsive .grid-column3,
.responsive .grid-container3 {
width: 176px;
}
.responsive .grid-column4,
.responsive .grid-container4 {
width: 235px;
}
.responsive .grid-column5,
.responsive .grid-container5 {
width: 294px;
}
.responsive .grid-column6,
.responsive .grid-container6 {
width: 353px;
}
.responsive .grid-column7,
.responsive .grid-container7 {
width: 412px;
}
.responsive .grid-column8,
.responsive .grid-container8 {
width: 471px;
}
.responsive .grid-column9,
.responsive .grid-container9 {
width: 530px;
}
.responsive .grid-column10,
.responsive .grid-container10 {
width: 589px;
}
.responsive .grid-column11,
.responsive .grid-container11 {
width: 648px;
}
.responsive .grid-column12,
.responsive .grid-container12 {
width: 707px;
}
}
/**/
/* phone */
/**/
@media screen and (max-width: 767px) {
body {
-webkit-text-size-adjust: none;
}
.responsive li {
display: block;
float: none;
border: 0;
border-top: 1px solid #d9d9d9;
}
.responsive i {
width: 52px;
margin: 0 -7px 0 -19px;
text-align: center;
}
.responsive li:first-child {
border-top: 0;
border-radius: 5px 5px 0 0;
}
.responsive li:first-child > a {
border-radius: 4px 4px 0 0;
}
.responsive li:last-child {
border-radius: 0 0 5px 5px;
}
.responsive li:last-child > a {
border-radius: 0 0 4px 4px;
}
.responsive .dropdown > b {
display: none;
}
.responsive .dropdown > div {
position: static;
width: auto;
height: 0;
overflow: hidden;
border-radius: 0;
box-shadow: none;
}
.responsive .dropdown:hover > div {
height: auto;
margin: 1px 0 -1px;
border-top: 1px solid #d9d9d9;
}
.responsive .dropdown:first-child:hover {
border-radius: 5px 5px 0 0;
}
.responsive .dropdown:first-child:hover > a {
border-radius: 4px 4px 0 0;
}
.responsive .dropdown:last-child:hover {
border-radius: 0;
}
.responsive .dropdown:last-child:hover > a {
border-radius: 0;
}
.responsive ul li {
padding: 1px 0;
}
.responsive ul a {
padding: 11px 19px 11px 38px;
line-height: 18px;
}
.responsive ul li:first-child {
border-radius: 0;
}
.responsive ul li:first-child > a {
border-radius: 0;
}
.responsive ul li:last-child {
border-radius: 0;
}
.responsive ul li:last-child a {
border-radius: 0;
}
.responsive ul .dropdown > div {
margin-left: 0;
border-radius: 0;
}
.responsive ul .dropdown:first-child:hover {
border-radius: 0;
}
.responsive ul .dropdown:first-child:hover > a {
border-radius: 0;
}
.responsive ul .dropdown:last-child:hover {
border-radius: 0;
}
.responsive ul .dropdown:last-child:hover > a {
border-radius: 0;
}
.responsive ul ul a {
padding-left: 57px;
}
.responsive ul ul li:first-child {
border-radius: 0;
}
.responsive ul ul li:first-child > a {
border-radius: 0;
}
.responsive ul ul .dropdown:first-child:hover {
border-radius: 0;
}
.responsive ul ul .dropdown:first-child:hover > a {
border-radius: 0;
}
.responsive ul ul ul a {
padding-left: 76px;
}
.responsive .right {
border-left: 0;
}
.responsive .right.dropdown > div {
border-radius: 0;
}
.responsive .right ul li:first-child {
border-radius: 0;
}
.responsive .right ul li:first-child > a {
border-radius: 0;
}
.responsive .grid-column {
float: none;
width: auto;
margin: 0;
border: 0;
border-top: 1px solid #d9d9d9;
}
.responsive .grid-column:first-child {
border-top: 0;
}
.responsive .grid-column:first-child ul li:last-child,
.responsive .grid-column:first-child ul li:last-child > a,
.responsive .grid-column:last-child ul li:first-child,
.responsive .grid-column:last-child ul li:first-child > a,
.responsive .grid-column:last-child ul li:last-child,
.responsive .grid-column:last-child ul li:last-child > a,
.responsive .right .grid-column:first-child ul li:first-child,
.responsive .right .grid-column:first-child ul li:first-child > a {
border-radius: 0;
}
.responsive-collapsable li {
display: none;
}
.responsive-collapsable .opener {
display: block;
border-radius: 5px;
}
.responsive-collapsable:hover li {
display: block;
}
.responsive-collapsable:hover .opener {
display: none;
}
}
/*----------------------------------------------------------------------------*/
/* CUSTOMIZATION */
/*----------------------------------------------------------------------------*/
.responsive,
.responsive input,
.responsive textarea,
.responsive button {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.responsive {
background: #ffffff;
}
.responsive li {
border-color: #d9d9d9;
background: #ffffff;
font-size: 13px;
line-height: 52px;
}
.responsive a {
color: #a6a6a6;
}
.responsive a:hover {
background: #f2f2f2;
color: #000;
}
.responsive a.active {
color: #000;
}
.responsive .dropdown > div {
background: #ffffff;
}
.responsive .dropdown > a:after {
border-top-color: #a6a6a6;
}
.responsive .dropdown > a.active:after {
border-top-color: #000;
}
.responsive .dropdown > b {
background: #ffffff;
}
.responsive .dropdown:hover > a {
color: #000;
}
.responsive .dropdown:hover > a:after {
border-top-color: #000;
}
.responsive ul li {
background: #ffffff;
line-height: 17px;
}
.responsive ul a {
padding-top: 17px;
padding-bottom: 17px;
}
.responsive .grid-column {
border-color: #d9d9d9;
}