jQuery menu - How can I put arrows on menu to denote submenus?

jQuery menu - How can I put arrows on menu to denote submenus? - javascript

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

Related

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

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..

Bouncing Slide Menu with Jquery

I'm new to Jquery and fairly new to HTML/CSS, but because I'm the type that learns through hands-on experience, I've been building a practice website while I learn new things, and have been experimenting with elements I'd like to eventually implement on a genuine site.
I've been trying to build a proper slide menu that activates when the cursor is hovered over the menu items. I've managed to get the menus to slide out, but if I move my cursor down into the slid-out menu, the whole thing starts bouncing! I've tried utilizing .stop() but then it flashes!
I've found questions on here and other sites from people with very similar (if not identical) issues, but I think I'm not understanding any of the answers that worked for them. I need visuals, and answers like "insert an if () {} statement" confuses me because I'm not sure where to put it. If I go by what my source material instructs me to do (put a check/if statement in the bottom function) it just seems to break the code and then the menus don't even slide out.
It has been very frustrating, and when I get too frustrated (like after six hours) I can't think as well about a solution, so if someone could help me find errors in my code or give me a fairly detailed explanation of what I could do to fix this bouncing problem, and how it started, I would really appreciate it.
I've attached the JQ, HTML, & CSS. Thanks in advance.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

You have a space between your <li> elements and the dropdown menu (You can see it here).
Just remove / move it.
I did
nav {
[...]
// padding: 10px 0;
padding: 0;
}
nav li {
[...]
// padding: 0 10px;
padding: 10px;
}
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding: 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

Change css in nav li ul where top:50px to padding-top:23px
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
padding-top:23px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0`;
display:block;
}
ul.sub-menu {
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

css + html menu hitbox

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

Hide sub menu on page load jquery

I have created a vertical menu with sub menus. I have used a unorder list. When my page loads it shows the top level menu and submenu but when I click the top level it will hide the submenu which works fine for click event. I would like my page to only show the top level menu and only once clicked to will display the sub menu. Am new to jquery your help would be greatly appreciated.
$(function() {
$('#menu li a').click(function(event) {
var elem = $(this).next();
if (elem.is('ul')) {
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
#menu {
padding: 0;
margin: 0;
list-style-type: none;
font-size: 13px;
color: #717171;
width: 100%;
}
#menu li {
border-bottom: 1px solid #eeeeee;
}
#menu li a:hover {
color: White;
background-color: #ffcc00;
}
#menu a:link {
color: #717171;
text-decoration: none;
display: block;
padding: 7px 10px;
}
#menu a:hover {
color: White;
}
#menu li ul {
padding: 0;
margin: 0;
list-style-type: none;
background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Top Menu 1
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 2
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 3
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>Top Menu 4
<ul>
<li>
Menu 1
</li>
</ul>
</li>
</ul>

css can do this without javascript. Set ul sub menu to display: none.
#menu li ul
{
padding:0;
margin:0;
list-style-type:none;
background-color:#999;
display: none;
}
Demo

Hide the sub-menu to start with CSS.
#menu li ul
{
display: none; /* hide sub uls */
padding:0;
margin:0;
list-style-type:none;
background-color:#999;
}

jQuery - Change vertical menu to horizontal

I'm trying to use the Tendina jQuery Plugin. It works great, but I'd like the menus to be laid out horizontally, like this:
I've been messing around with the CSS ( inline-block and other stuff ) but haven't been able to make it work.
I'm not gonna post the JS because it's a whole lot of code... I think too much to paste here, but feel free to check the JSFiddle.
Any help would be highly appreciated.
Thanks.
HTML
<ul class="dropdown">
<li>
Menu 1
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Submenu 2</li>
<li>Submenu 2</li>
<li>Submenu w/ children
<ul>
<li>Subsubmenu 2</li>
<li>Subsubmenu 2</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Submenu 3</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
CSS
.dropdown {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
font-size: 12px;
}
.dropdown li {
padding: 0 10px;
}
.dropdown li.selected {
background-color: #f2f2f2;
}
.dropdown li a {
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
}
.dropdown li > ul li {
padding: 0 20px;
}
.dropdown li > ul li a {
color: gray;
}
.dropdown li > ul li > ul li {
padding: 10px 30px;
}

Here's an updated version of your fiddle
.dropdown
{
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:#f7f7f7;
font-family:Arial,Helvetica,sans-serif;
padding-top:20px;
font-size:12px
}
.dropdown li
{
padding:0 10px;
display:inline-block;
width:auto
}
.dropdown li.selected
{
background-color:#f2f2f2
}
.dropdown li a
{
display:block;
width:100%;
padding:10px;
text-decoration:none;
text-transform:uppercase;
color:#000
}
.dropdown ul
{
position:absolute
}
.dropdown li > ul li
{
padding:10px 0;
}
.dropdown li > ul li a
{
color:gray
}
.dropdown li > ul li > ul li
{
padding:10px 30px
}
}

Develop Reference

JavaScript is the programming language of the Web.

jQuery menu - How can I put arrows on menu to denote submenus? - javascript

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

Related

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

Bouncing Slide Menu with Jquery

css + html menu hitbox

Hide sub menu on page load jquery

jQuery - Change vertical menu to horizontal

Categories

Resources