<ul class="dropdown-menu" role="menu">
<li data-submenu-id="submenu-patas"> Books & Audible <span style="float:right; padding-left:10px; padding-top:2px;"><i class="fa fa-angle-right"></i></span>
<div id="submenu-patas" class="popover nav_bg_books">
<h3 class="popover-title">Books & Audible</h3>
<ul style="float:left; z-index:999; ">
<h5 style="color:#C30">Books</h5>
<li>Books </li>
<li>Textbooks</li>
<li>Magazine</li>
</ul>
<ul style="float:left; z-index:999;">
<h5 style="color:#C30">Audible</h5>
<li>Audible Audiobooks</li>
<li>Books with Audio Companions</li>
</ul>
</div>
</li>
</ul>
I have a html content like above. when i mouse over Books & Audible it will show its sub items.but when i click on the main or its sub category its is not redirecting to the corresponding page
I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.
Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}
need a little help in hiding/showing divs. I know there were a few posts on here but none that specifically targeted what I am looking to do.
My code is below. What I would like to do is have the corresponding DIV display when it is clicked on from the leftColum LI.
<div id="leftColumn">
<ul>
<li> Painting </li>
<li> Landscaping </li>
<li> Kitchen </li>
<li> What's next? </li>
</ul>
</div>
<div id="rightColumnPainting">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
</ul>
</div>
<div id="rightColumnLandscaping">
<ul>
<li> <img src="./img/paint1.jpg" /> </li>
<li> <img src="./img/paint2.jpg" /> </li>
<li> <img src="./img/paint3.jpg" /> </li>
<li> <img src="./img/paint4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnKitchen">
<ul>
<li> <img src="./img/yard1.jpg" /> </li>
<li> <img src="./img/yard2.jpg" /> </li>
<li> <img src="./img/yard3.jpg" /> </li>
<li> <img src="./img/yard4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnNext">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house2.jpg" /> </li>
<li> <img src="./img/house3.jpg" /> </li>
<li> <img src="./img/house4.jpg" /> </li>
</ul>
</div>
For this to work you need to hide the div ul elements, and then use the :target selector to display: block:
#leftColumn {
display: block;
}
#leftColumn ul {
display: block;
}
div ul {
display: none;
}
div:target ul {
display: block;
}
You do, of course, need to ensure that the #leftColumn ul is visible first; and, further, requires that the a elements by which you're navigating within the page has the appropriate id within it's href attribute:
<ul>
<li>Painting</li>
<li>Landscaping</li>
<li>Kitchen</li>
<li>What's next?</li>
</ul>
JS Fiddle demo.
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
None of my content appears to be showing in a web browser. I created the website in Wordpress
I am not sure whether I am missing some vital code but it seems to display the logo and the 'Services' bar but otherwise my page appears to be empty
header.php:
</head>
<body class="">
<div id="wrapper">
<div id="jump">
<p>jump to content</p>
</div>
<div class="hud-content">
<div id="content-container">
<div id="header">
<div id="logo">
<a href="/" title="Wild Lion Media">
<img src="/wildlion/wp-content/themes/child/images/logo.png" width="95" height="120" alt="Wild Lion Media" title="Wild Lion Media" />
</a>
</div>
<h1>
Wild Lion Media
</h1>
<div id="hud-toggler">
<ul>
<li>Login / Register</li>
</ul>
</div>
</div><div id="nav">
<ul>
<li id="nav-home">Home</li>
<li id="nav-dandad"><a class="nav-item" href="/dandad" title="Wild Lion Media">Wild Lion Media</a>
<div class="subnav">
<ul class="subnav">
<li>About</li>
<li>Events</li>
<li>Join</li>
<li>Latest</li>
<li>Partnerships</li>
<li>White Pencil</li>
<li class="feature">
<p class="intro">Get your voice heard</p>
<p>Wild Lion Media Membership: It’s classy, exclusive, well connected – everything you could ask for from a private member’s club. Ok, we don’t have a pool on the roof, but just wait till you see the size of our archive.</p>
<p class="readmore">Read More</p>
<img src="#" width="167" height="167" alt="Nav Yellow Pencil" class="feature-pic"/>
<ul class="feature-links">
<li><a href="/dandad/join/individual-membership" title="Individual Membership">Individual<br />
Membership</a></li>
<li><a href="/dandad/join/d-ad-education-network" title="Education Network">Education<br />
Network</a></li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-inspire"><a class="nav-item" href="/inspiration" title="Inspiration">Inspiration</a>
<div class="subnav">
<ul class="subnav">
<li>Inspired by…</li>
<li>Watch & Listen</li>
<li>Have Your Say</li>
<li>Features & Opinion</li>
<li>Profiles</li>
<li>Archives & Collections</li>
<li class="feature">
<p class="intro">Wild Lion Media<br/>President’s Lectures</p>
<p>Chosen by the President of Wild Lion Media speakers represent the best in their creative fields and inspire discussion and debate.<br/></p>
<p class="readmore">Book your tickets</p>
<img src="#" width="167" height="167" alt="President’s Lectures" class="feature-pic"/>
</li>
</ul>
</div> </li>
<li id="nav-awards"><a class="nav-item" href="/awards" title="Awards">Awards</a>
<div class="subnav">
<ul class="subnav award-sections">
<li>
<p class="intro">Professional Awards</p>
<p>Yellow Pencils are recognised the world over as a symbol of true creative achievement. Year on year the Wild Lion Media Annual showcases the very best work and continues to provide an unrivalled source of creative inspiration.</p>
<ul>
<li>Professional</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
<li>
<p class="intro">Student Awards</p>
<p>Creatives the world over value the Wild Lion Media Student Awards above any other. Winning a Wild Lion Media Student Award truly marks you out as one of the best. Take your first step in becoming a creative superstar.</p>
<ul>
<li>Student</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-talent"><a class="nav-item" href="/talent" title="Talent">Talent</a>
<div class="subnav">
<ul class="subnav">
<li>Spotlights</li>
<li>Portfolios</li>
<li>New Blood</li>
<!-- <li>Graduate Placement Scheme</li>-->
<li>Graduate Academy</li>
<!-- <li>Jobs</li>-->
<li class="feature">
<img src="#" alt="Graduate Academy - Where the creatively brave shine" class="fullpic" />
</li>
</ul>
</div>
</li>
<li id="nav-learning"><a class="nav-item" href="/learning" title="Learning">Learning</a>
<div class="subnav">
<ul class="subnav">
<li>Case Studies</li>
<li>Commentary</li>
<li>Guides</li>
<li>Talks</li>
<li class="new">Projects</li>
<li>Workshops</li>
<li>Professional Development</li>
<li class="feature">
<img src="#" alt="Education Network Membership. One yellow pencil. Lots of benefits." class="fullpic" />
</li>
</ul>
</div> </li>
<li id="nav-search">
<form action="/search" method="get" accept-charset="utf-8">
<p><label for="search">Search</label><input type="text" name="q" value="Search" id="search" class="tfield" tabindex="5" /></p>
<p><input type="submit" id="search_submit" value="Go" tabindex="6" /></p>
</form>
</li>
</ul>
</div> <div id="content">
<div class="panel-10">
<p class="widget-title">Services</p>
<ul class="powerlinks pl-feature extended">
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/video_production.jpg" width="176" height="104" alt="Video Production" title="" />
<p>
<a href="#">
<span>
<strong>Video Production</strong>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Every element of your production can be designed to meet your needs.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/talking_heads.jpg" width="176" height="104" alt="Talking Heads" title="" />
<p>
<a href="#">
<span>
<strong>Talking Heads</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
A simple but effective way of communicating a message and introducing key players.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/motion_graphics.jpg" width="176" height="104" alt="Motion Graphics" title="" />
<p>
<a href="#">
<span>
<strong>Motion Graphics</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Whether 2D logo design or 3D animation and visual effects, anything is possible.
</span>
</a>
</p>
</li>
<li class="last">
<img src="/wildlion/wp-content/themes/child/images/web_videos.jpg" width="176" height="104" alt="Web Videos" title="" />
<p>
<a href="#">
<span>
<strong>Web Videos</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
From social networks to blogs and news feeds, get your viral out there.
</span>
</a>
</p>
</li>
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/live_events.jpg" width="176" height="104" alt="Live Events" title="" />
<p>
<a href="#">
<span>
<strong>Live Events</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Why limit your audience to the venue capacity? Capture your event in style.
</span>
</a>
</p>
</li>
</ul>
</div>
<div class="panel-10">
<div class="panel-8 alpha">
<div class="panel-2 alpha">
</div>
</div>
</div>
<div class="panel-10" id="footer">
<div class="panel-2">
<p>© 2012 Wild Lion Media Limited </p>
</div>
<div class="panel-2" id="back-to-top">
<p>Back to the top</p>
</div>
</div>
<div class="clearing"></div>
</div>
</div>
<div class="overlay"></div>
On line 5 of your stylesheet you have:
#nav,
#hud,
#hud-toggler,
#imagebar,
#jump,
div #breadcrumb,
#quick-jump,
#sitemap,
#external-links,
#back-to-top,
ul.powerlinks,
ul.article-nav,
#sidenav ul,
p.return,
a.doc-pdf,
a.doc-word,
div.logo a {
display: none;
}
This is causing everything to be hidden. Remove that line and you'll see your content.
In your style.css (line 5) you have a rule:
#nav, #hud, #hud-toggler, #imagebar, #jump, div #breadcrumb, #quick-jump, #sitemap, #external-links, #back-to-top, ul.powerlinks, ul.article-nav, #sidenav ul, p.return, a.doc-pdf, a.doc-word, div.logo a {
display: none;
}
It hides all your content.