<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Vad gör vi?
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>Drift</h3></li>
<!-- Typography -->
<li><i class="glyphicon glyphicon-cloud"></i> Kapacitetstjänst</li>
<li><i class="glyphicon glyphicon-flash"></i> Kommunikation</li>
<li><i class="glyphicon glyphicon-road"></i> Managed server</li>
<li><i class="glyphicon glyphicon-eye-open"></i> Övervakning</li>
<!-- End Components -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<ul class="nav navbar-nav">
I´ve seen a few other questions in this topic, but the don´t answer mine.
Is it possible to put a delay to the dropdown when the marker is not in the dropdown area. (Just to prevent clients to fall of the menu).
Thankful for answers.
Related
i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I'm new to bootstrap and was wondering if anyone could help me.
I want a menu with icons only, but trying to do it won't let me.
My HTML:
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Notifications</li>
<li> Discover</li>
<li>Messages</li>
</ul>
</div>
I want to display icons instead of messages.
Thanks for all the help.
You can include bootstrap glyphicons as icons using the below markup. Instead of text, update to <i> tag with respective glyphicon.
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
<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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.
This toolbar is working as expected, but now there is a new requirement to provide a mechanism to extend this toolbar with new buttons from the outside (maybe via json configuration...), or to remove the default buttons.
e.g, imagine that we provided this toolbar as a service and there are options to be able to add/remove buttons by configuration or something, currently not sure how...
My main questions are:
What pattern (design pattern) should I use to extend this toolbar(if possible of course :) ). Please keep in mind that someone that wants to extend the toolbar should provide the buttons with the
logic.
How to structure the project
I want to divide the button's functionality into different javascript files
and load them together in the index.html. What's the recommended way to do it?
Note: I cannot use ES6(should support IE11 also :( ) and I don't use node js to have WebPack/Gulp/Grunt
Project structure
myProj
>index.html
>css
>> style.css
>js
>>script.js
Now I want to divide this big script into smaller files (like question 3),
which technique should I use? Maybe require.js (since I don't have the option to compile...
Any example will be very helpful
This is for example of the HTML code and all the handlers logic inside the jsFile
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<nav id="navi" class="navbar navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" class="dropdown open keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<a>
Collapsible Group 1</a>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav" style="margin-left:25%;">
<form class="navbar-form navbar-left">
<div class="input-group">
<span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>
<input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
<span class="badge badge-danger">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
<hr>
<li>Notif 2</li>
<hr>
<li>Notif 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
<li>Hebrew</li>
<li>Finnish</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</nav>
<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/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A great example of a preexisting, widely-used, and well-supported library that does the exact things you are requesting is TinyMCE 4. I highly recommend you look at their source code.
Specifically their Editor class, which contains a good example of configuration options including toolbars and buttons. Also check out AddOnManager, which uses ScriptManager to load the necessary pieces as well as plugins, languages, etc.
It may make you dizzy digging through it all but if you need help there is a big community behind it that could point you in the right direction.
I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
I have a menu built using Bootstrap 3.0. It floats to the left and can be re-sized to fit only the icons by adding a css class to it using jQuery's toggle_class(). What I want to achieve is once this menu is toggled to a smaller version, I would like the drop down menu to become a vertical slide out menu.
Here is an example of what I am trying to accomplish http://wrapbootstrap.com/preview/WB0B30DGR If there is a plugin that does please point me to it.
Here is my HTML code:
<div id="wrap">
<div id="content">
<div id="navigation" class="" role="navigation">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
</button>
<a class="navbar-brand" href="./">CIMP Admin</a>
</div>
<!--SIDENAV
============================================= -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active" ><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown ">
<i class="fa fa-camera"></i> Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-picture-o"></i> Library</li>
<li><i class="fa fa-picture-o"></i> Albums</li>
<li><i class="fa fa-picture-o"></i> Slideshows</li>
</ul>
</li>
<!-- Modules -->
<li class="dropdown ">
<i class="fa fa-puzzle-piece"></i> Modules <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-thumb-tack"></i> Posts</li>
<li><i class="fa fa-cloud"></i> Uploads</li>
<li><i class="fa fa-desktop"></i> Testimonials</li>
</ul>
</li>
<li><i class="fa fa-users"></i> Users</li>
<li calss="active"><a id="toggle-pane" href="#"><i class="fa fa-caret-square-o-left"></i> Hide Menu Bar</a></li>
</ul>
</div>
</nav><!--/ nav -->
</div><!--/ navigation -->
</div><!--/ content -->
</div><!-- wrap -->
<script type="text/javascript">
$("#toggle-pane").click(function () {
$('#wrap').toggleClass("folded");
});
</script>