Mugen Application

Home

Drop-Down 1
 

Sub Menu 1

Sub Menu 2

Sub Menu 3



Drop-Down 2
 

Sub Menu 1

Sub Menu 2

Sub Menu 3



Contact Us

#menu{ 
 background: #369; 
 height: 50px; 
 position: relative; 
 margin: 0; 
 padding: 0; 
 list-style: none; 
 min-width: 500px; 
} 
#menu > li{ 
 float: left; 
 border-left: 1px solid #379; 
 border-right: 1px solid #359; 
 background: #369; 
} 
#menu li a{ 
 display: block; 
 padding: 10px; 
 text-decoration: none; 
 font: 16px/30px Roboto, verdana, arial; 
 color: white; 
} 
#menu li ul{ 
 position: absolute; 
 top: 80px; 
 margin: 0; 
 padding: 0; 
 width: 150px;
 visibility: hidden;
 border-top: none; 
 list-style: none;
 background: white; 
 white-space: nowrap; 
 box-shadow: 0 2px 3px rgba(0,0,0,0.3); 
 transition: all 0.2s ease-in;
} 
#menu li:hover ul{ 
 top: 50px;
 visibility: visible;
} 
#menu li:hover a{ 
 background: white; 
 color: #369; 
 transition: all 0.2s ease-in-out;
} 
#menu li:hover ul li { 
 color: #369; 
 display: block; 
 width: 100%; 
} 
#menu li:hover ul li a:hover{ 
 background: rgb(230,230,230);
} 

See the Pen Simple CSS Drop Down Menu by Virender (@vkmr83) on CodePen.

<div id="social_link_container">
 <div id="share_btn" class="icon share" onclick="share()">
 <i class="fa fa-share-alt fa-lg"></i>
 </div>
 <div id="social_btn">
 <div class="icon fb"> <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
 <div class="text">Facebook</div>
 </div>
 <div class="icon tw"> <a href="#"><i class="fa fa-twitter fa-lg"></i></a>

 <div class="text">Twitter</div>
 </div>
 <div class="icon inst"> <a href="#"><i class="fa fa-instagram fa-lg"></i></a>

 <div class="text">Instagram</div>
 </div>
 <div class="icon gplus"> <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
 <div class="text">Google+</div>
 </div>
 <div class="icon ytube"> <a href="#"><i class="fa fa-youtube fa-lg"></i></a>
 <div class="text">YouTube</div>
 </div>
 </div>
</div>

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

#social_btn {
 display: none;
 position: relative;
}
#share_btn {
 position: relative;
}
.icon {
 position: relative;
 border: none;
 border-radius: 50px;
 text-align: center;
 margin: 10px;
 padding: 5px;
 width: 30px;
 height: 30px;
 line-height: 32px;
 background: #ffffff;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.icon a {
 width: 30px;
 height: 30px;
 display: block;
}
.icon > .text {
 position: absolute;
 top: 5px;
 left: 10px;
 background: white;
 padding: 0 10px;
 display: table;
 font: bold 16px/30px Roboto, Verdana, Arial;
 visibility: hidden;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 transition: all 0.2s ease-in-out;
 z-index: -3;
}
.icon:hover > .text {
 visibility: visible;
 left: 120%;
}
.share {
 color: orange;
 cursor: pointer;
}
.share:hover {
 background: orange;
 color: white;
}
.fb, .fb a {
 color: rgb(59, 89, 152);
}
.tw, .tw a {
 color: rgb(0, 172, 237);
}
.inst, .inst a {
 color: rgb(81, 127, 164);
}
.gplus, .gplus a {
 color: rgb(221, 75, 57);
}
.ytube, .ytube a {
 color: rgb(187, 0, 0);
}

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

function share() {
 var hidden = $("#social_btn").css("display") == "none";
 if (hidden) {
 $("#social_btn").slideDown(500).css("display", "inline-block");
 console.log("sucess");
 } else {
 $("#social_btn").slideUp(500);
 }
}

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.