Bootstrap Snippet Beautiful Dropping Menu using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <div id="side-menu" class="move-me" >
        <hr class="hr-set" />
        <span class="logo-text" >COMPANY NAME   </span>  <i  class="menu-close-icon glyphicon glyphicon-align-justify"></i> 
        <hr class="hr-set-two" />
        <ul  >
            <li>
             <a href="#" > <i class="glyphicon glyphicon-home"></i>    Home</a>
            </li>
            <li>
             <a href="#" >  <i class="glyphicon glyphicon-th"></i>  Features</a>
            </li>
            <li>
              <a href="#" > <i class="glyphicon glyphicon-time"></i>  Pricing</a>
            </li>
             <li>
              <a href="#" >  <i class="glyphicon glyphicon-user"></i>  Developer</a>
            </li>
             <li>
               <a href="#" > <i class="glyphicon glyphicon-map-marker"></i> Contact</a>
            </li>
        </ul>
    <div class="intro-txt">
         <br />
    <i><strong>Company Ovewview </strong></i>
        <hr />
      <p>
             Nunc at viverra risus. In euismod quam ac dictum varius. 
             Nunc at viverra risus. 
             In euismod quam ac dictum varius.
             <br>
             <a href="http://www.binarytheme.com/" target="_blank" style="text-decoration:none;color:#000">by : binarytheme </a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* =============================================================
   GENERAL STYLES
 ============================================================ */
body {
          background-color:#1DA69C;
       
}
.p-set
{
    padding-top:120px;
     line-height:30px;
     color:#fff;
     font-size:16px;
}
.hr-set {
    border-top:1px solid rgba(0, 0, 0, 0)!important;
    margin-bottom:20px;
}
.hr-set-two {
    border-top:1px solid rgba(0, 0, 0, 0.05)!important;
    margin-bottom:5px;
}
/* =============================================================
   SIDE MENU STYLES
 ============================================================ */
#side-menu {
    height:100%;
    position:fixed;
    top:-1000px;
    left:-250px;
    background-color:#CF2545;
    color:#fff;
    z-index:999;
    overflow:auto;
    max-width:500px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//SIDE MENU SCRIPTS
 $(document).ready(function () {
            $('.menu-close-icon').click(function (e) {
                e.preventDefault();
                $('#side-menu').animate({ left: '-250px', top: '-1000px' });
               
            });
            $('.menu-open-icon').click(function (e) {
                e.preventDefault();
                $('#side-menu').animate({ left: '0px', top: '0px' });
               
            });
 });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Beautiful Dropping Menu "
Bootstrap 3.2.0 Snippet by cojahmetov

Related: See More

Questions / Comments:

"Beautiful Dropping Menu " Bootstrap 3.2.0 Snippet by cojahmetov

Related: See More

Questions / Comments:

"Beautiful Dropping Menu "
Bootstrap 3.2.0 Snippet by cojahmetov