Responsive Website Design: Different Style Navigation

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Different Style Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>
.row {
 margin-left:0px;
 margin-right:0px;
}
#wrapper {
 padding-left: 70px;
 transition: all .4s ease 0s;
 height: 100%
}
#sidebar-wrapper {
 margin-left: -150px;
 left: 70px;
 width: 150px;
 background: #222;
 position: fixed;
 /*height: 100%;*/
    z-index: 10000;
 transition: all .4s ease 0s;
}
.sidebar-nav {
 display: block;
 float: left;
 width: 150px;
 list-style: none;
 margin: 0;
 padding: 0;
}
#page-content-wrapper {
 padding-left: 0;
 margin-left: 0;
 width: 100%;
 height: auto;
}
#wrapper.active {
 padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
 left: 150px;
}
#page-content-wrapper {
 width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
 color: #999;
 display: block;
 float: left;
 text-decoration: none;
 width: 150px;
 background: #252525;
 border-top: 1px solid #373737;
 border-bottom: 1px solid #1A1A1A;
 -webkit-transition: background .5s;
 -moz-transition: background .5s;
 -o-transition: background .5s;
 -ms-transition: background .5s;
 transition: background .5s;
}
.sidebar_name {
 padding-top: 25px;
 color: #fff;
 opacity: .7;
}
.sidebar-nav li {
 line-height: 40px;
 text-indent: 20px;
}
.sidebar-nav li a {
 color: #999999;
 display: block;
 text-decoration: none;
}
.sidebar-nav li a:hover {
 color: #fff;
 background: rgba(255, 255, 255, 0.2);
 text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
 text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
 height: 65px;
 line-height: 60px;
 font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
 color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
 color: #fff;
 background: none;
}
#main_icon {
 float:right;
 padding-right: 65px;
 padding-top:20px;
}
.sub_icon {
 float:right;
 padding-right: 65px;
 padding-top:10px;
}
.content-header {
 height: 65px;
 line-height: 65px;
}
.content-header h1 {
 margin: 0;
 margin-left: 20px;
 line-height: 65px;
 display: inline-block;
}
 @media (max-width:767px) {
 #wrapper {
 padding-left: 70px;
 transition: all .4s ease 0s;
}
#sidebar-wrapper {
 left: 70px;
}
#wrapper.active {
 padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
 left: 150px;
 width: 150px;
 transition: all .4s ease 0s;
}
}
  body {
 padding-top: 50px;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */
html, body {
 overflow-x: hidden; /* Prevent scroll on narrow devices */
 height: 100%;
}
 @media screen and (min-width: 768px) {
 .row-offcanvas {
 position: relative;
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas-right {
 right: 25%;
}
 .row-offcanvas-left {
 left: 25%;
}
 .row-offcanvas-right .sidebar-offcanvas {
 right: -25%; /* 3 columns */
 background-color: rgb(255, 255, 255);
}
 .row-offcanvas-left .sidebar-offcanvas {
 left: -25%; /* 3 columns */
 background-color: rgb(255, 255, 255);
}
 .row-offcanvas-right.active {
 right: 0; /* 3 columns */
}
 .row-offcanvas-left.active {
 left: 0; /* 3 columns */
}
 .row-offcanvas-right.active .sidebar-offcanvas {
 background-color: rgb(254, 254, 254);
}
 .row-offcanvas-left.active .sidebar-offcanvas {
 background-color: rgb(254, 254, 254);
}
 .row-offcanvas .content {
 width: 75%; /* 9 columns */
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas.active .content {
 width: 100%; /* 12 columns */
}
 .sidebar-offcanvas {
 position: absolute;
 top: 0;
 width: 25%; /* 3 columns */
}
}
@media screen and (max-width: 767px) {
 .row-offcanvas {
 position: relative;
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas-right {
 right: 0;
}
 .row-offcanvas-left {
 left: 0;
}
 .row-offcanvas-right  .sidebar-offcanvas {
 right: -50%; /* 6 columns */
}
 .row-offcanvas-left  .sidebar-offcanvas {
 left: -50%; /* 6 columns */
}
 .row-offcanvas-right.active {
 right: 50%; /* 6 columns */
}
 .row-offcanvas-left.active {
 left: 50%; /* 6 columns */
}
 .sidebar-offcanvas {
 position: absolute;
 top: 0;
 width: 50%; /* 6 columns */
}
}
</style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">LOGO</a> </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="container-fluid">
  <div class="row row-offcanvas row-offcanvas-left">
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
      <div class="list-group"> <a href="#" class="list-group-item active">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> </div>
    </div>
    
    <div class="col-xs-12 col-sm-9 content">
      <p class="pull-left">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
      </p>
      <div class="container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
          <li><a data-toggle="tab" href="#menu1">Dashboard</a></li>
          <li><a data-toggle="tab" href="#menu2">Other</a></li>
          <li><a data-toggle="tab" href="#menu3">Section</a></li>
        </ul>
        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <form class="form-horizontal" role="form">
              <div class="row">
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="inputEmail" class="col-md-4 control-label">Email:</label>
                    <div class="col-md-8">
                      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="inputPassword" class="col-md-4 control-label">Password:</label>
                    <div class="col-md-8">
                      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="inputLabel4" class="col-md-4 control-label">Label 4:</label>
                    <div class="col-md-8">
                      <input type="text" class="form-control" id="inputLabel4" placeholder="Label 4">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="input5" class="col-md-4 control-label">1234567890:</label>
                    <div class="col-md-8">
                      <input type="text" class="form-control" id="input5" placeholder="input 5">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="input6" class="col-md-4 control-label">123456789012:</label>
                    <div class="col-md-8">
                      <input type="text" class="form-control" id="input6" placeholder="input 6">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="input7" class="col-md-4 control-label">12345678901234:</label>
                    <div class="col-md-8">
                      <input type="text" class="form-control" id="input7" placeholder="input 7">
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                  <div class="form-group">
                    <label for="input8" class="col-md-4 control-label">1234567890123456:</label>
                    <div class="col-md-8">
                      <input type="text" class="form-control" id="input8" placeholder="input 8">
                    </div>
                  </div>
                </div>
              </div>
              
            </form>
          </div>
          <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
          <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
          </div>
          <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

</div>

<!--sidebar-toggle ends here

sidebar-->
<div class="pull-right">
<div id="wrapper" class="active">
  <div id="sidebar-wrapper">
    <ul id="sidebar_menu" class="sidebar-nav">
      <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
    </ul>
    <ul class="sidebar-nav" id="sidebar">
      <div class="pull-right">
      <a href="#myMapModal" class="btn" data-toggle="modal">Check In MAP</a>
      <div class="modal fade" id="myMapModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <div class="container">
                <div class="row">
                  <div id="map-canvas" class=""></div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <li><a>link2<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
});
</script>
<script type="text/javascript">
$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
    if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
     $('.list-group-item').attr('tabindex', '-1');
    } else {
     $('.list-group-item').attr('tabindex', '');
    }
    $('.row-offcanvas').toggleClass('active');
    
  });
});

</script>
</body>
</html>

Tuesday 5 May 2015

Different Style Navigation

Create index.html

No comments:

Post a Comment