I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.
You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>
Related
I have a mega menu with position absolute and after the mega menu, I have a relative container like this:
<nav class="mega-menu relative">
<div class="logo-wrapper">
<img src="./logo.png" alt="">
</div>
<ul class="nav-items">
<li><a data-menu="#mega-1" href=""> Men fashion </a></li>
</ul>
<div id="mega-1" class="mega-item absolute">
</div>
</nav>
<div class="owl-slider owl-theme home-slider relative">
</div>
When I hover on the mega menu it's getting behind the container.
I have tried many solutions from StackOverflow but it does not work for me.
see the image
I am trying to use Semantic UI Step (https://semantic-ui.com/elements/step.html) in my app, but can't figure out how to use it.
I understand the UI aspect of it, but can't figure out the following:
How can I change the <a class="active step"> whenever a user clicks on a step, and make other steps inactive?
How do I display different content in <div class="ui attached segment"> everytime a step is clicked?
How do I disable other steps while something is being processed in one of the steps?
I am new to semantic and web in general. I was thinking to use jQuery to get these components and update everything through that, but I am not sure if that's a good approach?
Can someone please suggest something with a code snippet? Thank you for your help!
This is the UI part of it from Semantic UI.
<div class="ui three top attached steps">
<a class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</a>
<a class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</a>
<a class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</a>
</div>
<div class="ui attached segment">
<p></p>
</div>
If you and an id to each step like stepShip, stepBill and stepConfirm
<a id="stepShip" class="step">
A function like this
var setStep = function(id){
$('#'+id).addClass('active').nextAll().addClass('disabled').removeClass('active');
};
Can then be called at start up like this
setStep("stepConfirm");
or attached to the steps like this
$('.step').click(function(){setStep($(this).attr('id'));})
I'm using The malihu scrollbar in combination with a semantic ui dropdown. I expected the dropdown to overflow the scrollbar so all content would be shown. Instead it hides the dropdown under the scrollbar so the items are invisible.
The html that I use for the dropdown is from Semantic UI:
<div class="ui compact menu">
<div class="ui simple dropdown item">
Dropdown
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>
I am building a site with Bootstrap. On a mobile device, I have a hamburger menu. This appears as part of the Navbar. When I click the navbar, the content of the page is pushed down and the menu appears at the top. This is the default behavior of Bootstrap's Navbar. I would like to push the content right and have my menu take up the full height of the device.
Is there a way to do this with Bootstrap? Currently, my code looks like this:
<div class="collapse" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
Is there a way to make the hamburger menu appear along the side instead of the top?
you could use the jasny bootstrap - it's pretty nice and you can integrate it too bootstrap really easy without touching core files:
http://www.jasny.net/bootstrap/javascript/#offcanvas
also, bootstrap already got a offcanvas function:
http://getbootstrap.com/examples/offcanvas/
Without testing:
<div class="sidebar-offcanvas" id="nav1">
<h4>Hello</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<nav class="navbar">
<div class="col-xs-2">
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#nav1">
☰
</button>
</div>
<div class="col-xs-8 center-block text-center">
My App
</div>
<div class="col-xs-2 text-right">
<button>login</button>
</div>
</nav>
////EDIT////
Working fiddle: http://jsfiddle.net/chjdfqpg/2/
I am trying to create following UI in bootstrap with responsive menu, can anyone provide me guide line how I can achieve this. Both top and side menu should be responsive.
Following is URL what I am trying to create.
In assuming that you know the basics of web design, I will give you the short explanation how the Bootstrap works.
Bootstrap is HTML, CSS and JS framework that handles the responsiveness AUTOMATICALLY. You must only include the libraries correctly and know which Bootstrap css-classes have you too include into your HTML tags.
For example, if you want to achieve the design part for search as in your drawing, you must do something like here in Bootstrap documentation
or for navbar.
I will give you quick hint for components structure of your problem (of course, there is a lot work in css :) ):
<!--The header-->
<div class="col-lg-12">
<div class="col-lg-12">
<div class="col-lg-3"> <!--Logo or whatever in top left side-->
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../Content/img/chrome_logo.jpeg" />
</a>
</div>
</div>
<div class="6"></div>
<div class="col-lg-3" style="float:right"> <!--Search input-->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
<ul class="nav nav-pills">
<li role="presentation" class="active">Menu1</li>
<li role="presentation">Menu2</li>
<li role="presentation">Menu3</li>
<li role="presentation">Menu4</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2">
//HTML PART FOR SIDEBAR
</div>
<div class="col-lg-10">
//HTML PART FOR MAIN CONTENT
</div>
</div>
You must wisely include exact col-lg, col-md, col-sm and col-xs classes to reach the responsiveness for each browser sizes.
One of the most important things also is to learn Boostrap grid system. This is unavoidable
for components organization.
Just practice as in documentation, learn the Bootstrap css-classes and organisations carefully and after are while, you will be able to design complexer stuffs.
I hope I theoretically covered everything what you need to design with Boostrap framework.