Creative Bootstrap Sliding Menu Effect On Mouse Hover
Hello friends, today we are going to learn how to make the ‘Creative Bootstrap Sliding Menu Effect On Mouse Hover’.
STEP 1:
Create a code for bootstrap_slider_demo.htm file. This file is for the sliding effect.
[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
Meul Tech Bootstrap Examples
</title>
<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– Custom CSS –>
<link href="one-page-wonder.css" rel="stylesheet">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20body%2C%0A%20%20%20%20%20%20%20%20html%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav.sidebar%2C%0A%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-moz-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-o-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2010px%200%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%40media%20(min-width%3A%20765px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20calc(100%25%20-%2040px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%2040px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20right%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%3Ahover%20%2B%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar.navbar.sidebar%3E.container%20.navbar-brand%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.navbar%3E.container-fluid%20.navbar-brand%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-brand%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-right%3A%2013px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20%3E%20li%3Afirst-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-top%3A%201px%20%23e5e5e5%20solid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20%3E%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-bottom%3A%201px%20%23e5e5e5%20solid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20static%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20transparent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20-webkit-box-shadow%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-collapse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.container-fluid%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%200px%200%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.navbar-inverse%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23777%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20-160px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%40media%20(min-width%3A%201330px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20calc(100%25%20-%20200px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%3Ahover%2C%0A%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%3Afocus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23CCC%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20transparent%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav%3Ahover%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20section%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-left%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head><body>
<!– Page Content –>
<div class="container">
<!– First Featurette –>
<div class="featurette" id="about">
<!————————code—————start—————->
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a><ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Services</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact</a></li>
<li class="divider"></li>
<li><a href="#">Team</a></li>
<li class="divider"></li>
<li><a href="#">Career</a></li>
</ul>
</li>
<li><a href="#">Blog<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
<li><a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
</ul>
</div>
</div>
</nav>
<!—-Code——end———————————–>
</div>
<!– /.container –>
<!– jQuery –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<!– Bootstrap Core JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/php]
STEP 2:
Create a index.html file to make the UI.
[php]
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
Meul Tech Bootstrap Examples
</title>
<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– Custom CSS –>
<link href="one-page-wonder.css" rel="stylesheet">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20body%2C%0A%20%20%20%20%20%20%20%20html%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav.sidebar%2C%0A%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-moz-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-o-transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20margin%20200ms%20ease-out%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2010px%200%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%40media%20(min-width%3A%20765px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20calc(100%25%20-%2040px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%2040px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20right%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%3Ahover%20%2B%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar.navbar.sidebar%3E.container%20.navbar-brand%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.navbar%3E.container-fluid%20.navbar-brand%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-brand%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding-right%3A%2013px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20%3E%20li%3Afirst-child%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-top%3A%201px%20%23e5e5e5%20solid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20%3E%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-bottom%3A%201px%20%23e5e5e5%20solid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20static%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20transparent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20-webkit-box-shadow%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-collapse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.container-fluid%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%200px%200%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.navbar-inverse%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23777%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20-160px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20li%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%40media%20(min-width%3A%201330px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20calc(100%25%20-%20200px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20left%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20nav.sidebar%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%3Ahover%2C%0A%20%20%20%20%20%20%20%20nav.sidebar%20.navbar-nav%20.open%20.dropdown-menu%3Eli%3Ea%3Afocus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23CCC%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20transparent%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20nav%3Ahover%20.forAnimate%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20section%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-left%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head><body>
<!– Navigation –>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<h1 class="logo">
<a title="" href="https://www.mehulprajapati.com" >
<img alt="" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg" style="height: auto; width: auto; display: inline-block; top: 0px;">
</a>
</h1>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<!– /.navbar-collapse –>
</div>
<!– /.container –>
</nav>
<!– Full Width Image Header –><iframe src="bootstrap_slider_demo.htm" width="800" height="600" frameborder="0" scrolling="no">
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-1">
<a href="https://www.mehulprajapati.com" class="logo"><img alt="Meul Tech " class="img-responsive" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg">
</a>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
©Copyright 2016. All Rights Reserved.
</div></div>
</div>
</div>
<!– jQuery –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<!– Bootstrap Core JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/php]
You can download the code for rest of the css and javascript files.
Finally our ‘Creative Bootstrap Sliding Menu Effect On Mouse Hover’ is ready to run. Hit your url and check out your login form.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Creative Bootstrap Template With Free Source Code
- Free Template For Multi Page Hosting Website In Bootstrap
- Stunning Bootstrap One Page Template Free Project
- Bootstrap Navigation Bar With Animated Icons
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.