EDIT: Thanks for the answers. Do these suggestions keep the li:hover dropdown working, just adding the onclick feature for touch devices? I don't want desktop users to have to click, the menu should appear on:hover for them.
I have done my research on this subject but can't seem to find a good solution.
My site http://www.eastbournenl.com
Menu's in question are 'League Info' and 'Results' in the top navigation bar.
My CSS dropdown menu activates on li:hover (the li item is NOT a link, I changed the cursor so it appears as a hand but clicking will take you nowhere).
However, clearly this doesn't work on touch devices.
Is there a way to maintain the setup I have currently with the li:hover working on non-touch devices, but adding some javascript to enable functionality for touchscreen devices?
HTML
<div id="link_bar">
<ul>
<li>League Info
<ul class="drop">
<li>Team Directory</li>
<li>Fixtures</li>
<li>Rules</li>
<li>Umpire Directory</li>
</ul>
</li>
</ul>
</div>
And CSS
#link_bar ul ul {
display: none
}
#link_bar ul li:hover > ul {
display: block
}
#link_bar ul:after {
content: "";
clear:both;
display:block
}
#link_bar ul ul {
position: absolute;
top: 1em;
width: 10em;
padding-top: 1em;
margin-left: 0;
}
#link_bar ul ul li {float:none ; position: relative ; padding: 1em 1em 1em 0}
#link_bar ul ul li {width:100%}
#link_bar .drop li:hover a {color: #99FF33}
With Modernizr, you can target touch devices, so include it in your code, and then :
JS part :
if(Modernizr.touch){
$('.hasDropDown').click(function(){
$(this).find('.drop').addClass('visible');
});
}
HTML part :
<div id="link_bar">
<ul>
<li class="hasDropDown">League Info
<ul class="drop">
<li>Team Directory</li>
<li>Fixtures</li>
<li>Rules</li>
<li>Umpire Directory</li>
</ul>
</li>
</ul>
</div>
CSS :
.visible {
display: block;
}
That's weird, most of touch devices emulate hover events.
as you know touch device not supported hover effects
you can use some plugin for that,like Modernizer.js
another solution i see on the Web is:
div#menu ul li:hover ul needs to become div#menu ul li:active ul for it to respond on touch devices because they don't support hover states.
my specific solution for you is:
Jquery Smart Menu
Related
Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.
you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/
You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}
Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
All,
Using ONLY javascript and CSS, I need to create a responsive menu. The menu must also supports one level sub-menus.
Due to the memory limitations of the embedded hardware, I cannot use external libraries/frameworks.
I have browsed as much as I could. The examples I have found don't quite address my problem.
If the menu is responsive, it does not support sub-menus ...
If it supports sub-menus, the submenus expand within the menus, instead of replacing them ...
If it does everything I need, then it is in jQuery, and I cannot use it ...
I have been 'piecing' together snippets of code (http://codepen.io/vpappano/pen/NRLRWJ)
However, I am now stuck with the following problem. Because I embedded the submenu (id="myDropdown")
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
within the main menu (id="myTopnav"), I don't manage to display the submenu when in the minimized state.
The only solution I could come up with is to duplicate the submenu (id="myDropdown2")
<div class="dropdown-content" id="myDropdown2">
Link 1
Link 2
Link 3
</div>
which, of course, is "so wrong on so many different levels" ... :-)
Can you improve my code in such a way that I am using only one occurrence of the submenu? A link to a JSFiddle, CodePen, or similar would be extremely helpful ...
Please NO jQuery. I can only use javascript and CSS. However, if you are aware of a little js-css-only library that achieves what I am looking for (MIT license), that will also do the trick ... :-)
Thank you so much ...
Vincenzo
Here is a "not so simple" demo of responsive navigation taken from w3schools, and modified by me to show a simple submenu behavior.
The most important part here to take note is that you might have to create a function to close other submenus, when you open another one and edit the non responsive CSS.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSubMenu() {
var x = document.getElementById("submenuNav");
if (x.hidden === true) {
x.hidden = false;
} else {
x.hidden = true;
}
}
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact
<ul class="subnav" id="submenuNav" hidden >
<li>Sub Menu1</li>
<li>Sub Menu2</li>
<li>Sub Menu3</li>
</ul>
</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
I am relatively new to jquery and I am seeking help. The aim is to click on a list item attached to a ul and have it appear whilst any other list items disappear. Only the active one is viewable
The Issue I am having is that when I click on another list item the active one disappears (as intended), but it doesn't reveal the other one, it remains hidden. I am looking for a way to reveal the list, while hiding the ones that are in-active.
I have uploaded my problem: http://jsfiddle.net/CbU4d/
html:
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li>Current Article
<ul>
<li>Example 1</li>
</ul>
</li>
<li class="active">Past Articles
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
css:
#secondary-nav {
float:left;
height:auto;
width:23%; /*210px*/
border-right:2px solid #000;
position:relative;
}
/*heading styles*/
#secondary-nav ul li {
padding: 0 10px;
list-style-type: none;
}
#secondary-nav ul li a {
font-family:TrajanPro;
font-size:1em;
line-height: 32px;
color:#000;
}
/*links*/
#secondary-nav ul ul li a {
display: block;
font-family:TrajanPro;
font-size:0.9em;
line-height: 27px;
text-decoration: none;
color:#000;
transition: all 0.15s;
}
#secondary-nav ul li a:hover {
display:block;
color:#af2931;
text-decoration:underline;
}
#secondary-nav ul ul {
display: none;
}
#secondary-nav li.active ul {
display: block;
}
/css
jquery using 1.7.1
$(document).ready(function(){
$("#secondary-nav ul").click(function(){
//slide up all the link lists
$("#secondary-nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
Try with
$("#secondary-nav ul ul").slideToggle();
Demo
I got it to work (I think) by making two changes:
Change the selector on line 2 to this:
"#secondary-nav ul li"
This means the event will be attached to the list item you click, not the entire list.
Remove the if statement on line 6. Since we're hiding all of the second level uls in the previous line, we don't need to check if it's visible; we know it isn't.
Change line 6 to this:
$(this).children('ul').slideDown();
This is because the ul you want to unfold is a child of the li you're clicking, not a sibling.
Here's my fixed jsFiddle.
Edit: If you want to stop it from hiding and re-showing when you click the one that's already expanded, just chuck this at the top of the handler:
if ($(this).children('ul').is(':visible')){
return
}
I want to make a menu (with submenu and div containing link for every submenu on hover).
Something like this:
AAAA | BBBB
| bbb1
| bbb2 HERE IS MOUSE (bbb2 LINK)
| bbb3
It is possible to keep listing submenus when you try to open link? If you move mouse from "bbb2" link disappear.
what I have now:
http://i.imgur.com/vhFtaQc.png
and what I want:
http://i.imgur.com/BOQNMat.png
Here is JSFiddle: http://jsfiddle.net/zu8Eu/
Hope you understand. Thanks!
As is noted you may need to nested the <div> inside the li elements. But additional to keep the hover() you can use padding to set the white space:
HTML
<li id="submenu1">
aaaa1
<div class="one">
Link for aaa1
</div>
</li>
CSS
.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}
The demo http://jsfiddle.net/zu8Eu/27/
I'm sure the are jQuery plugins that will provide you with what you want to achieve, but I'd say restructure you HTML and nest the elements properly.
<ul>
<li>Menu 1
<ul>
<li>
Submenu 1
<ul>
<li>
Subsub menu
</li>
</ul>
</li>
</ul>
</li>
</ul>
This way, you can use CSS to achieve what you want:
ul li ul{
display: none;
}
ul li:hover > ul{
display: block;
}
ul li ul li:hover > ul{
display: block;
}
Once you hover on the first li, it will show the direct child ul, if you hover on that ul, it will still count as a hover on the first li, meaning it'll still be visible.
Fiddle: http://jsfiddle.net/x54gZ/
This question already has an answer here:
How to highlight active tab on the website menu?
(1 answer)
Closed 9 years ago.
My question is :
I have a menu items, and I want to highlight the active tab that users switch to that points to another page for sure .
stackover flow use :
.nav {
float: left;
font-size: 125%;
}
.nav ul {
margin: 0;
}
.nav li {
background: none repeat scroll 0 0 #777777;
display: block;
float: left;
margin-right: 7px;
}
**.nav .youarehere {
background: none repeat scroll 0 0 #FF9900;
}**
.youarehere a {
color: #FFFFFF;
}
.nav li:hover {
background-color: #FF9900;
}
.nav a {
color: #FFFFFF;
display: block;
padding: 6px 12px;
text-decoration: none;
}
Can anybody tell me what else they use to make this work ?
menu :
<ul class="nav">
<li> <a href="{$smarty.const._URL}/index.{$smarty.const._FEXT}" class="wide-nav-link menu_link" >{$lang.homepage}</a></li>
<li class="dropdown">
{$lang.category} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_video_categories}
</ul>
</li>
{if $smarty.const._MOD_ARTICLE == 1}
<li class="dropdown">
{$lang.articles} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_article_categories}
</ul>
</li>
{/if}
<li> {$lang.top_videos}</li>
<li>{$lang.new_videos}</li>
<li>{$lang.random_video}</li>
{if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}
<li>{$lang.contact_us}</li>
{if isset($mm_menu_always_inject2)}{$mm_menu_always_inject2}{/if}
{if $logged_in != 1 && isset($mm_menu_notlogged_inject)}{$mm_menu_notlogged_inject}{/if}
</ul>
Or you can add programmatically class="active" (or selected) to the current selected menu and do this:
.nav li a.active {
color: #FFFFFF;
}
#ChrisHerbert your solution will not work... you will change all the li of the menu... because the class is in your body tag. (EDIT: the solution was changed, see comments)
With #ChrisHerbert answer, you can do it in two ways:
1) with Javascript, take the class in the body tag then select the one with the associate index (:eq() in jQuery). (you can find a way without javascript for non-javascript user)
OR
2) you can do: .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you know the index of each page in your menu! Or other child selector but, old versions of IE don't like it!
I think you should do it with my solution rather then the body tag. Still, it is really useful to have that class in the body for page specific thingy to add.
Add a unique class to the <body> tag of each page. For example, on the home page:
<body class="home">
On the contact page: <body class="contact">
On the blog page: <body class="blog">
..and so on.
Then, in your CSS, do something like this:
.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
// styling to indicate active state
}
I think the question is, are you looking to have this done dynamically? Or are you coding each page? The other two solutions are great, but a bit overkill if actually you're accessing each page individually. You could just add a class to the selected nav element depending on the page. This is probably the easiest to get your head around if you've not done it before, but #ChrisHerbert's solution is the nicest way of doing it dynamically just using CSS (no PHP ifs etc).
HTML
<div class="nav">
Home
About us
Portfolio
</div>
CSS
.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}
EDIT: Just realised that #AnnieCaron's answer is the same as mine.