I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo
You might be able to use vertical-align for the list elements & text-align for the links.
Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here
Related
I want to have a dropdown menu that can keep dropping down but instead of going down, dropping to the right like this pic
I know how to create a dropdown menu that goes below only like this pic
My current HTML code :
<div class="nav navbar-fixed-top">
<ul>
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my</li>
<ul>
<li>hehe</li>
</ul>
</ul>
</li>
My current CSS style :
.nav li {
font-size: 1.2em;
text-align: left;
width: 220px;
line-height: 60px;
font-size: 1.4em;
display: inline-block;
margin-right: -7px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Does anyone know the CCS style to enable it going to the right?
You can simply do it like this:
.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}
<ul class="outer">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my
<ul>
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
I hope the below helps.
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 1rem;
position: relative;
max-width: 200px;
width: 200px;
}
li:not(:last-child) {
border-bottom: thin solid white;
}
li>a {
color: white;
}
.main>li {
background-color: blue;
}
.sub>li {
background-color: red;
}
.subsub>li {
background-color: green;
}
.sub,
.subsub {
display: none;
}
.main>li:hover>.sub,
.sub>li:hover>.subsub {
display: inline-block;
position: absolute;
top: 0;
right: -200px;
}
<div class="nav">
<ul class="main">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul class="sub">
<li class="tuto2">www.e-homes.com.my
<ul class="subsub">
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
html code
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
css code
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jquery
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
if you have doubt for creatring drop down link you may Refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
<div class="container">
<div class="inner-wrap">
<ul id="filters">
<li>one
<ul class="dropM">
<li>I belong to one</li>
</ul>
</li>
<li>two
<ul class="dropM">
<li>I belong to two</li>
</ul>
</li>
<li>three
<ul class="dropM">
<li>I belong to three</li>
</ul>
</li>
<li>four
<ul class="dropM">
<li>I belong to four</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
background:#ffc600;
font-family:'helvetica neue';
font-size: 20px;
font-weight: bold;
}
body {
margin: 0 auto;
padding: 50px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;}
ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}
JS
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e){
filterMenuBtn.forEach(cliks => {
//console.log(cliks);
if(cliks === this) {
this.nextElementSibling.classList.toggle('open');
//console.log('i clicked this one');
}
});
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
JSFiddle
Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e) {
if (e.type == 'click'){
e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
e.currentTarget.nextElementSibling.classList.remove('open');
}
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));
I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Home
</li>
<li>Front End Design
<ul>
<li>HTML
</li>
<li>CSS
<ul>
<li>Resets
</li>
<li>Grids
</li>
<li>Frameworks
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
<li>Less
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax
</li>
<li>jQuery
</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
</ul>
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
And tried to place scroller like this by additon of css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
The result:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
<li>Less
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios</li>
<li>subTestimonials</li>
<li>subPortfolios</li>
<li>subTestimonials</li>
</ul>
</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li> <li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>About Us</li>
</ul>
By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.
Please change your css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
I hope it will help you..
I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>
I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}
Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo
On my menu, there is no indication if one of the menus (parent) has a sub menu (children). As an example, in FireFox under the View menu and in Chrome under the Tools menu the arrows appear. My question is how can I have arrows appear on menus where submenus exist?
HTML
<body>
<div id="container">
<div id="nav">
<ul id="navList">
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
<li>Blog
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>About
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
#container {
width: 1000px;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
#nav {
width: 330px;
float: left;
margin: 50px 0 0;
}
#navList li {
list-style: none;
margin: 0 0 10px;
position: relative;
float: left;
}
#navList a {
text-decoration: none;
color: #ffffff;
background-color: #333;
padding: 5px;
display: block;
width: 250px;
}
#navList a:hover {
background-color: #06F;
}
#navList ul, #navList ul ul {
display: none;
position: absolute;
top: 0;
left: 280px;
background-color: #333;
}
.listTab {
z-index: 100;
}
#navList .listTab li {
margin: 0;
}
#navList .listTab a, #navList .listTab a:hover {
width: 250px;
}
#navList .listTab a {
padding: 5px 5px 5px 10px;
}
#navList li:hover ul ul, #navList li:hover ul ul ul, #navList li:hover ul ul ul ul {
display: none;
}
#navList li:hover ul, #navList li li:hover ul, #navList li li li:hover ul, #navList li li li li:hover ul {
display: block
jQuery
jQuery
$(document).ready(function($) {
//Menu animation
$('#navList ul').css({display: "none"}); //Fix Opera
$('#navList li').hover(function() {
$(this).addClass('addPosition');
$(this).find('a').stop().animate({'width' : "280"});
$(this).find('ul:first').css({visibility : "visible", display : "none"}).show(400);
}, function() {
$(this).find('ul:first').css({visibility : "hidden"}).hide(400);
$(this).find('a').stop().animate({'width' : "250"});
$(this).removeClass('addPosition');
});
});
Try inserting some unicode characters on the menu's?
This post answer has two main arrows : What characters can be used for up/down triangle (arrow without stem) for display in HTML?
Example Home Demo
<li>Home ▼
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
From there, you can just modify font-sizes and positioning to move that arrow around to your liking. Using characters like this will be very lightweight for your menu. :)
those are just images that can be assigned to your li's background, and then be positioned:
#hasSubmenu{
background-image:url('images/arrow.png');
background-position:center right;
}
We could obtain with the help of after available in CSS
#navList li > a:after {
content: '>';
float:right;
}
Above code adds an arrow to every link
#navList li > a:only-child:after {
content: '';
}
Above code removes the arrow when the link is the only child
DEMO