Develop Reference

How to create a mobile left menu in Bootstrap?

I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?

change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>

How to set a href to bootstrap navbar onclick menu it should trigger to tabbar of another page

I have explain my query with this code. here when i click on dropdown navbar page should redirect to the tabbar available on another page.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#tab1">Page 3-tab1</a></li>
**<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->**
<li><a id="tab2" href="Page-3.html#tab2">Page 3-tab2</a></li>
**<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->**
<li><a id="tab3" href="Page-3.html#tab3">Page 3-tab3</a></li>
**<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->**
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
Page-3.html contains a tabbar should be activated and redirect on screen on click menubar.
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#tab1" role="tab">Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3" role="tab">Tab3<br></a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
I am new in jquery and it can be done through javascript/jquery. But i dont know exactly how to do it. So,please can anyone help me??Thank you in advance

You can use jquery to make this work.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#menu1">Page 3-tab1</a></li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li><a id="tab2" href="Page-3.html#menu2">Page 3-tab2</a></li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li><a id="tab3" href="Page-3.html#menu3">Page 3-tab3</a></li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
And then in page-3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 3-tab1</li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li>Page 3-tab2</li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li>Page 3-tab3</li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
<h1>page 3</h1>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
<li><a data-toggle="tab" href="#menu2">Tab2</a></li>
<li><a data-toggle="tab" href="#menu3">Tab3</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content in tab 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
<script>
$(document).ready(function() {
var hash = $.trim( window.location.hash );
console.log(hash);
var thisLink = $('a[href="'+hash+'"]');
console.log(thisLink.parent());
hash = hash.substring(1);
$(".active").removeClass("active");
$(thisLink.parent()).addClass("active");
$("#"+hash).addClass(" in active");
$('#gototab1').click(function() {
$('#myTab a[href="#menu1"]').tab('show');
});
$('#gototab2').click(function() {
$('#myTab a[href="#menu2"]').tab('show');
});
$('#gototab3').click(function() {
$('#myTab a[href="#menu3"]').tab('show');
});
}); //end of document ready
</script>

Dropdown menu with hover/mouseover event in jQuery

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.

Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

how make side navbar using razor in asp.net web app

i am tring to make the sidebar IN MY ASP.NET web app and using razor
here is what id looks now and i want to remove that white space between the end of the page and the side bar also what to make it collapse sidebar so the app is usable on mobile here is the page :
http://imgur.com/a/Jxx5m
and here is the code and i am using bootstrap and razor in asp.net mvc web app anyone can help i am stuck for two days tell
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5 col-sm-6 col-lg-4">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>Profile</li>
<li class="disabled">Disabled</li>
</ul>
</div>
<div class="col-xs-7 col-sm-6 col-lg-8">
<div class="panel panel-default">
<div class="panel-body">
Basic panel
</div>
</div>
</div>
</div>
</div>
</body>
here is the main _layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Primary <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</li>
<li class="dropdown">
Preparatory <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
Secondary <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
#if (ViewContext.HttpContext.User.IsInRole("Admin"))
{
<li>#Html.ActionLink("Add Chapter", "newChapter", "chapter")</li>
}
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
it will be great if someone tell me how to make one like this website
http://www.w3schools.com/
it is just everything i need thanks

In your _Layout.csthml change HTML from this:
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
To this:
<body>
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</body>
The container div is what is preventing the full width. Keep your View the same but without the <body> tags as these should really stay in the Layout.
Edit:
To hide side bar on mobile screen you can surround sidebar markup with <div class="hidden-xs">:
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="hidden-xs">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>Profile</li>
<li class="disabled">Disabled</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-8">
<div class="panel panel-default">
<div class="panel-body">
Basic panel
</div>
</div>
</div>
</div>
Change the col-xs-12 value on visible content as required.

How do I make a div to a Bootstrap drop-down

I need to make a div as a dropdown and when clicking on it,
the menu slides and shows its items.
I've tried to implement this but when clicking on the div it doesn't show
it's items at all.
I've used this reference:
http://getbootstrap.com/javascript/#dropdowns-examples
Here's the way I've implemented this:
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
</div>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</div>
How can it be solved ?

There's 2 things wrong here:
You're mixing both data-* attributes and JavaScript initialization, it should be either one or the other (maybe this isn't a real problem, but it is unnecessary and messy).
You haven't followed the example correctly, the dropdown trigger and contents need to both be contained within the div with class "dropdown".
Change the HTML to:
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
No JS required (just include the bootstrap.js and it should do the rest).
Working fiddle:
https://jsfiddle.net/dpjpcfuy/1/

You can do this easily with data-target attribute
<ul class="no-bullets droppable-menu">
<li>Our Story</li>
<li>Our Menu</li>
</ul>
target is in the div
<div class="dropdown-menu" id="m-target-1">
... content in your div
</div>
<div class="dropdown-menu" id="m-target-2">
... content in your div
</div>
and remove
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
from your JS code. This should work!