jQuery submenu won't show up

jQuery submenu won't show up - javascript

Using the following code I could get the ABOUT and FAQ submenus to show up but nothing would appear on mouse hover and I have no idea why. Please help! If there is more code I should show just let me know! Thanks in advance for any help :)
The HTML:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations</li>
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities</li>
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
<li>Reservations</li>
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</ul>
The CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
The Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);
jsFiddle

The li elements for Accommodations, Activities and Reservations didn't correctly nest the submenu's ul elements. Check out the code in this JS Fiddle for a corrected version:
http://jsfiddle.net/9NdZC/
Here is just the HTML part:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
</li>
<li>Reservations
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
</li>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</li>
</ul>

Related

change background of selected navigation for the next load

I am designing a vertical menu for my website and trying to change the background colour of the navigation item when it is clicked and the page loaded using jQuery. It changes the background until the pages is not loaded. When the page is loaded, the background change is not present. I am following this fiddle. I am designing similar to w3school left navigation menu when an item is clicked, it retains the background change for that li/a/navigation item. How can I properly code to keep the background change for that specific link/a navigation item, for the next load? Here is my code.
$('.widget_nav_plus_widget a').click(function(e) {
$('.widget_nav_plus_widget a').removeClass('current_page_item');
$(this).addClass('current_page_item');
});
.widget_nav_plus_widget{
width: 100%;
height: 30em;
border: 1px solid #ccc;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.widget_nav_plus_widget ul li {
border-top: 1px solid #ccc;
background-color:#236870;
margin-left: -30px;
margin-right: -30px;
line-height:1.7em;
}
.widget_nav_plus_widget ul li a{
color:white;
text-decoration: none;
display:block;
}
.widget_nav_plus_widget ul li a:hover{
color:white;
display:block;
text-indent: 1em;
background-color:#0034a1;
}
.widget_nav_plus_widget ul ul li{
text-indent: 1em;
background-color: white;
color:black;
margin-top:-10px;
}
.widget_nav_plus_widget ul ul li a{
color:black;
text-decoration: none;
display:block;
}
.widget_nav_plus_widget ul ul li a:hover{
color:white;
display:block;
text-indent: 1em;
background-color:#4ba668;
}
.widget_nav_plus_widget ul ul ul li{
text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li:hover{
text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li a:hover{
color:white;
display:block;
text-indent: 3em;
background-color:#4ba668;
}
.current_page_item{
background-color:#4ba668;
color: white;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id="nav_plus_widget-2" class="widget inner-padding widget_nav_plus_widget XXsnipcss_extracted_selector_selectionXX">
<div class="menu-cpp-main-menu-duplicate-container">
<ul id="menu-cpp-main-menu-duplicate" class="menu">
<li id="menu-item-2486" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2486">
<a href="#" tabindex="1" >
Basics
</a>
<ul class="sub-menu">
<li id="menu-item-2463" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2463">
<a href="#cpp-loops" tabindex="1">
C++ Loops
</a>
</li>
<li id="menu-item-2464" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2464">
<a href="#c-functions" tabindex="1">
C++ Functions
</a>
<ul class="sub-menu">
<li id="menu-item-2465" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2465">
<a href="#cpp-functions-overloading" tabindex="1">
C++ Functions Overloading
</a>
</li>
</ul>
</li>
<li id="menu-item-2466" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2466">
<a href="#cpp-structure" tabindex="1">
C++ Structures
</a>
</li>
<li id="menu-item-2467" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2467">
<a href="#cpp-pointers" tabindex="1">
C++ Pointers
</a>
</li>
</ul>
</li>
<li id="menu-item-2468" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2468">
<a href="#cpp-object-oriented-programming" tabindex="1">
C++ Object Oriented Programming
</a>
<ul class="sub-menu">
<li id="menu-item-2469" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2469">
<a href="#c-classses-objects" tabindex="1">
C++ Classses and Objects
</a>
</li>
<li id="menu-item-2470" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2470">
<a href="#cpp-inheritance" tabindex="1">
C++ Inheritance
</a>
</li>
</ul>
</ul>
</div>
</aside>

You can use the Localstorage, I have made some changes in you JS code.
const currentPage = localStorage.getItem("currentPage");
$(`a[href='${currentPage}']`).addClass('current_page_item');
$('.widget_nav_plus_widget a').click(function(e) {
$('.widget_nav_plus_widget a').removeClass('current_page_item');
$(this).addClass('current_page_item');
localStorage.setItem("currentPage", $(this).attr('href'));
});

Problem with a Jquery toggleClass script when hovering

I'm new to the community, also pretty new in this world of web programming, this is the issue that is driving me nuts,
I tried this code to add a class when I hover the ul list element, so I can display the nav element, but instead of open only the hovered dropdown menu, it displays all the ul element with the class I selected.
Here is the Jquery code:
$(document).ready(function() {
$("ul").hover(function() {
$(this)
.find(".dropdown-list")
.toggleClass("dropdown-menu");
});
});
and these are the element targered in my html file:
<ul class="header-nav-responsive">
<li>HOME</li>
<li>
LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>
FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
Here is the CSS snippet:
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu, .nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0,0,0,.1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu, .nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li, .nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a, .nav-icons-big-screen .dropdown-menu li a{
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover, .nav-icons-big-screen .dropdown-menu li a:hover {
color:#2250fc;
}
At last, you can see how the page display in this link: https://patricio1984.github.io/Polo-template-emulation/
Thanks so much to all in advance! cheers!

The problem is because you are adding the event listener to the ul tag(This includes the parent ul too). Instead, you should have an event listener to the li, say with the class 'menu-item' and toggle the class based on that.
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
Here is the fiddle link https://jsfiddle.net/eskcrd3n/

Actually your issue here is lies under your main selector. You did go for listening to ul whilst you should listen to li elements. So whenever you listening to ul, the $(this) will refer to <ul class="header-nav-responsive"> so all your elements with class dropdown-list will be called for the trigger event.
$(document).ready(function() {
$("li").hover(function() {
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu,
.nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu,
.nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li,
.nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a,
.nav-icons-big-screen .dropdown-menu li a {
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover,
.nav-icons-big-screen .dropdown-menu li a:hover {
color: #2250fc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-nav-responsive">
<li>HOME</li>
<li>LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
NOTE: The best way to do this is to use a unique class for your menu titles to avoid any inconsistency.

THANKS SO MUCH to both you guys!! the Jsfiddle gave me the right idea, here is the corrected function:
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
And I added the menu-item class to all my li items!
Thanks!!! problem SOLVED! That was pretty quick =)

Expand/collapse a menu list animated and only with CSS

Here's what I'm trying to make:
Click on "PORTFOLIO";
Pushes everything down smoothly;
New links fade-in smoothly;
Click on "PORTFOLIO" again, do everything in reverse;
My current code;
$(function () {
$('[data-toggle]').on('click', function () {
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});
#list {
display: none;
}
#list.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.
Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.

With only CSS you may use :focus and eventually pointer-events if you want a toggle effect :
#list {
max-height: 0;
overflow: hidden;
transition: 0.5s linear;
}
a:focus+#list {
max-height: 15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
You can even do this very little CSS without class nor id :
ul a +ul {
max-height:0;
overflow:hidden;
transition:0.5s linear;
}
ul a:focus + ul {
max-height:15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>A Empresa
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li><a href="#nowhere" >Portfolio</a>
<ul>
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</nav>

I have created the menu only using css please check the following fiddle https://jsfiddle.net/dwgpqncw/2/ also the code for the same is posted below
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css menu</title>
<style>
*{margin:0; padding:0;}
ul{font-family:Arial, Helvetica, sans-serif;}
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;}
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0}
a{color:#000; text-transform:uppercase;}
ul li ul li a{color:red;}
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;}
ul li ul li{line-height:30px;font-size:16px;}
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; }
ul li .expandable:hover{text-decoration:underline;}
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px}
ul li .expandable:focus{color:red;}
ul li .expandable:focus +ul:nth-child(1){height:90px;}
ul li .expandable:focus +ul:nth-child(2){height:120px;}
ul li .expandable:focus +ul:nth-child(3){height:60px;}
ul li .expandable:focus +ul:nth-child(4){height:120px;}
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}
</style>
</head>
<body>
<ul>
<li>
Home
<ul>
<li>Home link 1</li>
<li>Home link 2</li>
<li>Home link 3 </li>
</ul>
</li>
<li>
A Empressa
<ul>
<li>Empressa link 1</li>
<li>Empressa link 2</li>
<li>Empressa link 3 </li>
<li>Empressa link 4 </li>
</ul>
</li>
<li>
Protfolio
<ul>
<li>Protfolio link 1</li>
<li>Protfolio link 2</li>
</ul>
</li>
<li>
Contato
<ul>
<li>Contato link 1</li>
<li>Contato link 2</li>
<li>Contato link 3 </li>
<li>Contato link 4 </li>
</ul>
</li>
</ul>
</body>
</html>

Submenu disappears as soon as I reach it with a mouse

I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});

Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});

Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.

Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}

I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File

How to reverse the direction of a suckerfish menu (drop-up)

I have a navigation bar at the bottom of my page rather than at the top. I am trying to implement a "drop-up" suckerfish menu. I want to do it with as little javascript as possible. My current code is as follows and works fine as a drop-down menu. Is there a way to reverse it?
Here is my code:
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
All help is appreciated. Thanks!

<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
bottom:0px;
position:absolute;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
bottom:20px;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
Try this without additional JS

We Keep Coding

JavaScript is the programming language of the Web.

jQuery submenu won't show up - javascript

Related

change background of selected navigation for the next load

Problem with a Jquery toggleClass script when hovering

Expand/collapse a menu list animated and only with CSS

Submenu disappears as soon as I reach it with a mouse

How to reverse the direction of a suckerfish menu (drop-up)

Categories

Resources