Simulate hover on superfish menu - hover

I want to open one of the submenus of a superfish menu with an event. For example with a button and "onclick". And i want it to stay opened until you press a Close button
How could i do that? Can i call a "hover event" function from the superfish.js somehow?
<ul class="sf-menu">
<li class="current" id="qwqw">
ThisToHover(forexample)
<ul >
<li>
Ismertető
</li>
<li class="current">
Cégtörténet
</li>
<li>
Telephely
</li>
<li>
ISO
</li>
<li>
Referecciák
</li>
</ul>
</li>
<li>
menu
<ul>
<li>Teherfuvarozás</li>
<li>Gépszállítás</li>
<li>Gépbérlet
<ul>
<li>Subsubmenu</li>
<li>Nyan Cat</li>
</ul>
</li>
<li>Gépi Földmunka</li>
<li>Bontás</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
menu
</li>
<li>
menu
</li>
</ul>


it was so much easier than I thought.
Simply had to add class 'sfHover'
document.getElementById('qwqw').className='sfHover';
...for example.

Related

My nested dropdown menus are not coming on bringing mouse over in navigation bar while designing a website

I have started designing a website using HTML CSS Bootstrap and while making navigation menu dropdown menu is not coming on bringing mouse over instead its showing under it
I am hereby attaching the required code
<ul class="main-menu sf-menu">
<li class="active">Home</li>
<li>Know Your AO/Region/Branch
</li>
<li>HR Section
</li>
<li>General Banking
<ul>
<li> RajBhasha </li>
<li> Security </li>
<li> Miscellaneous </li>
</ul>
</li>
</li>
<li> Advances </li>
<li>IT Section
</li>
<li>Regions
<ul>
<li>Region 1:Nainital </li>
<li>Region 2: Almora </li>
<li>Region 3: Pithoragarh and Champawat </li>
<li>Region 4: Bageshwar and Chamoli </li>
<li>Region 5: Udham Singh Nagar </li>
</ul>
</li>
<li>News
</li>
</li>
<li>Staff Corner</li>
</ul> <!-- /.main-menu -->
</nav>
The result is like thisenter image description here
Please Help....

First add class "dropdwon" in li which you want to make dropdown. Second add class "dropdown-menu" on ul
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav mainNavigation">
<li class="active">Home </li>
<li> About Us </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li class="dropdown"> Molex Portfolio
<ul class="dropdown-menu">
<li> Fibre Products </li>
<li> Copper Products </li>
</ul>
</li>
<li>Contact Us </li>
<li> Employment Opp </li>
</ul>
</nav>
</div>
and add this css
.dropdown:hover .dropdown-menu{ display:block; }

How to place icon in navigation bar

Hi I have created a navigation bar and I want to place a home image icon at the start of the navigation. However when I try to it either moves the other items down or when I hover over the icon the hover doesn't work properly.
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="icon-home"></li>
<li id="et"> England
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li id="et"> France
<ul>
<li>Ligue 1
</li>
</ul>
</li>
<li id="et"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li id="et"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li id="et"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
In the link below I managed to get the heading in line however the hover effect doesn't work. http://jsfiddle.net/mxohL7kL/

The home link has no text in it, that is why your hover effect is not the same height as the other link. What you could do is, gives the home anchor a text and hide it.
<!-- HTML -->
<li class="icon-home"><span>Home</span></li>
//css
.icon-home a span {
visibility:hidden;
}
see the example here

Slider DIV with unknown link?

I have created a slideshow but for some reason when I am clicking on the image to go to a next slide (as it should do) it takes it to another URL on a website I am creating.
I cant seem to find how I have managed to create a link to the page when clicking on it?
Here is the link to the page.
http://lichfieldrooms.uk/gallery.html

you <a> for all in navigation is broken you have not closed them so i think thats was causing the issue
<ul>
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
<li>
Rooms
<ul>
<li><a href="single.html">Single Bedroom</li>
<li><a href="double.html">Double Bedroom</li>
</ul>
</li>
<li><a href="gallery.html">Gallery</li>
<li><a href="calendar.html">Check Availability</li>
<li><a href="reservations.html">Terms</li
><li><a href="contact.html">Contact</li>
</ul>
it should be
<ul>
<li>Home
</li>
<li>About
</li>
<li>Rooms
<ul>
<li>Single Bedroom
</li>
<li>Double Bedroom
</li>
</ul>
</li>
<li>Gallery
</li>
<li>Check Availability
</li>
<li>Terms
</li>
<li>Contact
</li>
</ul>

how to make a menu highlighted while pointing sub menu?

I am making a menu bar with sub menus. what i need while hovering mouse to menu the sub menu will appear and menu has to be highlighted. Please help me.....
<div class="side-bar">
<ul class="">
<li>Home
</li>
<li>About Us
</li>
<li>Portfolio
<ul>
<li>SELECTED PROJECTS
</li>
<li>program
<!-- i need this to be highlighted while cursoring sub menu -->
<ul>
<li>RESIDENTIAL
</li>
<li>HOSPITALITY
</li>
<li>INSTITUTION &AMP; COMMERCIAL
</li>
<li>INFRASTRUCTURE
</li>
<li>EDUCATIONAL
</li>
<li>COMMUNITY
</li>
<li>HEALTHCARE
</li>
<li>FACTORY
</li>
<li>FARM HOUSES
</li>
<li>PRIVATE RESIDENCES
</li>
<li>INTERIORS
</li>
</ul>
</li>
<li>chronological
</li>
</ul>
</li>
<li>services
</li>
<li>news
</li>
<li>Press
</li>
<li>D [+] DR
</li>
<li>Careers
</li>
<li>Contact Us
</li>
</ul>
</div>

You can simply do that using CSS, so try this:
li:hover > a {
/* Selects all <a> elements that are placed immediately after <li> which is hovered */
color: #FFF; /* or any code you want */
}
So if the mouse is over the li itself it will be highlighted, also if it's over ul or li inside the first li it will be also highlighted
Hope this will help you ..

Insert a div class inside wordpress menu

<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?

You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>