I am trying to make a bootstrap side menu that makes sub items collapsible.
Similar to http://jsfiddle.net/
However I want link items in the submenus and not such a complicated structure.
This is what I tried
<div class="row">
<!-- Main component for a primary marketing message or call to action -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>
The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.
Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
More
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>
Related
this is My menu showing file, I need only highlighted current clickable menu item. currently active class item is highlighted
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li style="margin-left:20px;">
</li>
<li> # {{ Auth::user()->name }}</li>
<li class="active">PREGO<span class="sr-only">(current)</span></li>
<li>Edit Account</li>
<li>Projects</li>
<li>Collaborators</li>
<li>Todos</li>
</ul>
<ul class="nav nav-sidebar">
<li class="">Account</li>
<li class="">Help</li>
</ul>
</div>
how can do this?
.active a {
color: red;
}
<div class="col-sm-2">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contact us</li>
</ul>
</div>
I create this navigation menu with Bootstrap ..
How to make it display the dropdown menu on click for small devices but display on hover large ones?
Also whats the way to keep the menu (with burger) of small devices, on tablets as well?
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub
</li>
<li>Sub2
</li>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<ul class="col-sm-4">
<li>Cat</li>
<ul class="thirdmenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub
<ul class="thirdmenu">
<li>SubSub</li>
<li>SubSub</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub</li>
<li>Sub</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Css and Js are applied by Bootstrap... Not changes yet
To make work on hover on larger screens you can use this plugin.
If you want a hamburger menu, you should place it in Bootstrap .navbar as in official documentation
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.
Using Foundation 6, I try to get a responsive topbar that involves an animation on toggle (small screens).
I have this:
<div class="top-bar">
<div class="top-bar-title">
<strong>MyTitle</strong>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<span class="menu-icon" data-toggle></span>
</span>
</div>
<div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
1
</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
But even after importing motion-ui library, no transition happens.
Just a rough display:none to display:block of the menu and vice-versa.
It works when I replace data-responsive-toggle by data-toggle but I would lose responsiveness.
Is it a bug regarding Foundation 6?
I had the same problem. Solved it by adding both data-toggle and data-responsive-toggle to the first div:
<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
<button class="menu-icon" type="button" ></button>
<div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
<div class="top-bar-left">
<ul class="menu">
<li>Left Item 1</li>
<li>Left Item 2</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
</nav>
Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>
The bad thing is just have some copy of the nav-tab codes