I have CSS(HTML) horizontal menu and everything is working properly, but when i touch with the mouse one of the menu "listing" is appear, but i want to make it clickable.
I try almost everything in this row:
.main-nav-ul li:hover ul {
display: block;
}
But without success...
I`m using Joomla and custom HTML CSS Javascript module.
I use this code:
https://github.com/shahbokhari/webdev/blob/master/Vertical-Drop-Down-Navigation-2015%202/vertical-drop-down-navigation-using-html-css-2015.html
I want when i click on ЧАСТИ ЗА LED ТАБЕЛИ to be able to see sub menus in this category.
With css you can only handle hover(mouse enter and mouse out). to handle click you should use javascript:
$('.main-nav-ul li').click((e)=>{
$(e.target).closest('li').toggleClass('toggled');
});
it will toggle (add/remove) toggled class of li element, when it's clicked.
then you should replace li:hover to li.toggled in css , to apply toggled styles when li has toggled class.
you can see this in codepen
Related
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
I have a menu constructed of divs. For this I am using the default Joomla menu, modified to my own taste. This is a html question though, so that's why I'm posting it here.
The class of the top menu item that has a sub-menu underneath it is called "deeper parent". When this is clicked, instead of going to the link it has, I want it to just open the sub-menu, that's it.
I tried
.deeper {
pointer-events: none;
cursor: default;
}
.parent {
pointer-events: none;
cursor: default;
}
This however, disables the display of the sub-menu as well, which did show up before I used this css code.
Does anyone know how I can make the sub-menu appear upon hover, as well as upon click (for tables ;) ), without referring to the link that's behidn the top menu item?
You cannot disable click events using CSS. This must be done using Javascript/jQuery.
Assuming you're using jQuery on your site which most Joomla site do, you can use the following:
$(document).ready(function(){
$('#element').on('click', function(){
e.preventDefault();
// Rest of code to show the menu
});
});
You could also set the type for the parent menu item to separator in the Joomla Menu Manager which wraps the menu item in <span> tags rather than <a>
Okay, so I'm making a responsive navigation out of pure CSS (using a tutorial). The way it works is, when you're viewing the responsive (condensed) menu, the "Menu" button has a hidden checkbox input assigned to it. When the checkbox is checked, the navigation ul#menu (set to display:none; in mobile view) gets set to display:block like so:
input[type=checkbox]:checked ~ #menu {display:block;}
I also have a span with an arrow icon for menu items with submenus that rotates to point down when you hover over the li with the submenu.
<li class="dropdown">Link with Submenu<span class="arrow">></span></li>
.dropdown:hover .nav-arrow {transform:rotate(90deg);}
Standard stuff.
I didn't like the "hover" attribute displaying the submenu in mobile view, so I converted those to checkboxes as well. So tapping the li items will trigger their own checkboxes to display the submenu ul beneath them.
input[type=checkbox]#show-menu:checked ~ .sub-nav {display:block;}
The problem I can't seem to figure out now is how to get the submenu arrows to rotate down when you tap(check) the submenu link.
I've tried moving the input both above and below the li with the arrow (using both checkbox:checked + .nav-arrow and checkbox:checked ~ .nav-arrow respectively), but nothing seems to work.
Does anyone have any ideas of how to appropriately select the span with the arrow after the checkbox is checked? Appreciate it!
As a quick side note, I'm not JavaScript/jQuery savvy, and the point of this is to avoid using it, so any solutions negating those languages would be preferred. :)
Edit: Here's a js fiddle of my exact html/cs setup:
http://jsfiddle.net/nL3cd9mg/
Thanks for your responses so far, I hope the fiddle helps. :P
Ah! I finally got it. Simple solution I overlooked, as always. I just became more specific with my selectors:
input[type=checkbox]#show-cl-menu:checked ~ .show-cl-menu .nav-arrow {
instead of the old
input[type=checkbox]#show-cl-menu:checked ~ .nav-arrow {
Thanks everyone for your input!
If the issue is the actual rotation animation, try something like:
.subnav {
transition: transform .5s;
}
input[type=checkbox]#show-menu:checked ~ .sub-nav {
transform: rotate(90deg);
}
Obviously you'll need to change precisly what that is applied to fit your exact situation. Your question has no html so I can't be more specific to your situation. But you can see the parts that work together to get that rotating arrow effect.
i implemented a dropdown submenu under my mainmenu on my homepage
If you call the main-website and move with the mouse over the "product" menu item, youll see the dropdown.
http://led-werbeanzeige.de/index.html
Why is the menu not fluent, and shows up so many pixels below the original main menu?
Best regards and thanks for your help
Erik.
ad a rule to your css : .menu ul {top : 20px;};
your code isn't working because your rule $header ul applies for ul that contains options(product, service..) and ul that has products (the one that is the drop-down menu)
I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too