Jquery Navigation Menu: Responsive Navigation On Complex Websites

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Style Responsive Navigation</title>
<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>
body {
 background:#333;
}
.dropdown-menu {
 background-clip: padding-box;
 background-color: #000;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
 display: none;
 float: left;
 font-size: 14px;
 left: 0;
 list-style: outside none none;
 margin: 2px 0 0;
 min-width: 160px;
 padding: 5px 0;
 position: absolute;
 text-align: left;
 top: 100%;
 z-index: 1000;
}
.wrapper {
 padding:20px;
 margin:auto;
}
.block-me {
 background:#999999;
 height: 300px;
 margin: 10px;
 overflow: auto;
 padding: 20px;
 width: 582px;
 border: 2px solid;
 margin:auto;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .block-me {
 padding: 20px;
 width: 280px;
}
}
.block-me p {
 text-align:center;
 color:#FFFFFF;
 font-weight:bold;
 text-transform:uppercase;
}
.mecontainer {
 padding:10px;
 margin:auto;
}
.dropdown dd, .dropdown dt {
 margin:0px;
 padding:0px;
}
.dropdown ul {
 margin: -1px 0 0 0;
}
.dropdown dd {
 position:relative;
}
.dropdown a, .dropdown a:visited {
 color:#fff;
 text-decoration:none;
 outline:none;
 font-size: 12px;
}
.dropdown dt a {
 background-color:#4F6877;
 display:block;
 padding: 8px 20px 5px 10px;
 min-height: 25px;
 line-height: 24px;
 overflow: hidden;
 border:0;
 width:272px;
}
.dropdown dt a span, .multiSel span {
 cursor:pointer;
 display:inline-block;
 padding: 0 3px 2px 0;
}
.dropdown dd ul {
 background-color: #4F6877;
 border:0;
 color:#fff;
 display:none;
 left:0px;
 padding: 2px 15px 2px 5px;
 position:absolute;
 top:2px;
 width:280px;
 list-style:none;
 height: 100px;
 overflow: auto;
}
.dropdown span.value {
 display:none;
}
.dropdown dd ul li a {
 padding:5px;
 display:block;
}
.dropdown dd ul li a:hover {
 background-color:#fff;
}
.checkbox, .radio {
 display: inline;
 margin-bottom: 10px;
 margin-top: 10px;
 position: relative;
}
/*multilevel dropdown*/
 .dropdown-submenu {
 position: relative;
}
.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
 display: block;
}
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
 border-left-color: #fff;
}
.dropdown-submenu.pull-left {
 float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}

.nav-sidebar {
 width: 100%;
 padding: 8px 0;
 border-right: 1px solid #ddd;
}
.nav-sidebar a {
 color: #333;
 -webkit-transition: all 0.08s linear;
 -moz-transition: all 0.08s linear;
 -o-transition: all 0.08s linear;
 transition: all 0.08s linear;
 -webkit-border-radius: 4px 0 0 4px;
 -moz-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;
}
.nav-sidebar .active a {
 cursor: default;
 background-color: #428bca;
 color: #fff;
 text-shadow: 1px 1px 1px #666;
}
.nav-sidebar .active a:hover {
 background-color: #428bca;
}
.nav-sidebar .text-overflow a, .nav-sidebar .text-overflow .media-body {
 white-space: nowrap;
 overflow: hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
}
/* Right-aligned sidebar */
.nav-sidebar.pull-right {
 border-right: 0;
 border-left: 1px solid #ddd;
}
.nav-sidebar.pull-right a {
 -webkit-border-radius: 0 4px 4px 0;
 -moz-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 background: #ccc none repeat scroll 0 0;
 display: block;
}
.bs-example-navbar-collapse-1 {
 width:400px;
}
.collapse navbar-collapse {
 width:400px;
}
</style>
</head>
<body>
<div class="wrapper">
  
  <div class="mecontainer">
    
    <div class="block-me">
      
      <p>Dropdown</p>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
        </ul>
      </div>
    </div>
    
    
    <div class="block-me" style="overflow-x:hidden">
      
      <p>Responsive Dropdown Menu</p>
      <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        
        <div class="container">
          <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>
            <a class="navbar-brand" href="#">Logo</a> </div>
          
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Inbox</a></li>
                  <li><a href="#">Drafts</a></li>
                  <li><a href="#">Sent Items</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Trash</a></li>
                </ul>
              </li>
            </ul>
            
            </li>
            </ul>
          </div>
          
        </div>
      </nav>
    </div>
    
    
    <div class="block-me">
      
      <p> Multi-Dropdown</p>
      <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu"> <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                  <li><a href="#">3rd level</a></li>
                  <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    
    
    <div class="block-me">
      
      <p>Sidebar Navigation</p>
      <div class="col-sm-5">
        <nav class="nav-sidebar">
          <ul class="nav">
            <li class="active"><a href="javascript:;">Home</a></li>
            <li><a href="javascript:;">About</a></li>
            <li><a href="javascript:;">Products</a></li>
            <li><a href="javascript:;">FAQ</a></li>
            <li class="nav-divider"></li>
            <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
          </ul>
        </nav>
      </div>
      
    </div>
    
    <div class="block-me">
      
      <p>Multiselection dropdown using checkbox</p>
      <dl class="dropdown">
        <dt> <a href="#"> <span class="hida">Select</span>
          <p class="multiSel"></p>
          </a> </dt>
        <dd>
          <div class="mutliSelect">
            <ul>
              <li>
                <input type="checkbox" class="checkbox" value="Html" />
                Html</li>
              <li>
                <input type="checkbox" value="Css" />
                Css</li>
              <li>
                <input type="checkbox" value="Javascript" />
                Javascript</li>
              <li>
                <input type="checkbox" value="Jquery" />
                Jquery</li>
              <li>
                <input type="checkbox" value="Wordpress" />
                Wordpress</li>
              <li>
                <input type="checkbox" value="Angular-js" />
                Angular-js</li>
            </ul>
          </div>
        </dd>
      </dl>
    </div>
    
    <script type="text/javascript">
$(".dropdown dt a").on('click', function () {
          $(".dropdown dd ul").slideToggle('fast');
      });

$(".dropdown dd ul li a").on('click', function () {
          $(".dropdown dd ul").hide();
      });

function getSelectedValue(id) {
           return $("#" + id).find("dt a span.value").html();
      }

$(document).bind('click', function (e) {
          var $clicked = $(e.target);
          if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
      });

$('.mutliSelect input[type="checkbox"]').on('click', function () {
        
          var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
              title = $(this).val() + ",";
        
          if ($(this).is(':checked')) {
              var html = '<span title="' + title + '">' + title + '</span>';
              $('.multiSel').append(html);
              $(".hida").hide();
          } 
          else {
              $('span[title="' + title + '"]').remove();
              var ret = $(".hida");
              $('.dropdown dt a').append(ret);
              
          }
      });
</script>
  </div>
  
</div>

</body>
</html>

Thursday, 16 July 2015

Responsive Navigation On Complex Websites

Only Create index.html

No comments:

Post a Comment