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.
Related
I copied this code from somewhere else and don't know what to link on it are as all option are being shown in menu bar but the only problem is link aren't opening.
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="mr-auto">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active">
Home
</li>
<li class="has-children">
About Us
<ul class="dropdown">
<li>Our Teachers</li>
<li>Our School</li>
</ul>
</li>
<li>
Admissions
</li>
<li>
Courses
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
<div class="ml-auto">
<div class="social-wrap">
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black"><span
class="icon-menu h3"></span></a>
</div>
</div>
</div>
</div>
</div>
</header>
Do you have the files with the name about.html, admissions.html, courses.html, contact.html?
Just make sure you have created the files within the same directory
I'm doing a website project, where I'm using Materialize framework.
Problem :
I have to make a navbar, where it should be able to let out a dropdown menu/submenu. I think the main problem could be either on the overflow: or the z-index. Because of that, I've tried to test the overflow between auto, visible, etc. There are 2 observations that I got during my testing:
Navbar dropdown menu came out perfectly, but got hidden behind the main content
Navbar dropdown came out perfectly on top of the main content, but resulting a large white space between the navbar and the main content.
Can anyone points out what did I miss? or what is wrong in my code, any help would be appreciated, thank you.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<!-- Header -->
<nav id="navbar" class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">
<img src="images/logo_new.png" class="logosize" alt="logo">
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='test'>Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<!-- Info Page -->
<div class="container">
<div class="row">
<div class="col s12">
<!-- note: there is center before -->
<!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
<!-- Menu 1 -->
<div class="col s12 m5">
<p align="left">
<h3>
<b>Intimate House</b>
</h3>
<br> Project : Intimate House
<br>
<br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
<br>
<br> Site Area : 160 sqm
<br>
<br> Building Area : 210 sqm
<br>
<br> Design Phase : 2016
<br>
<br> Construction Period : April 2016 - July 2017
<br>
<br>
</p>
<div class="textbox">
<p align="left">
<i>
Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
It had a high ceiling, but lack of open space inside the house which make this house look
extremely dark, moist, and stuffy.</i>
<br>
<br>
</p>
<p align="right">
<i>
We transformed this house program by separating service area and private area. Furthermore private area is connected by a
connecting chamber in order to transform service area into private area which can be used
as a gathering room which is the main area in this Intimate House.</i>
<br>
<br>
</p>
<p align="left">
<i>
Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
an open space next to Living Room, High Ceiling, and Skylight.</i>
<br>
<br>
</p>
</div>
</div>
<!-- Menu 2 -->
<div class="col s12 m7">
<div class="slider">
<ul class="slides">
<li>
<img src="images/architecture/intimate_house/1.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/3.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/4.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/5.jpg">
<!-- random image -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Dropdown Menu -->
<div class="container_sub">
<div class="section">
<div class="row">
<!-- Architect -->
<ul id='architect' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='architect-mobile' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Interior -->
<ul id='interior' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='interior-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Commercial -->
<ul id='commercial' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='commercial-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Office -->
<ul id='test' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='test-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="footer-copyright">
<div class="container">
Copyright #
<a class="white-text" href="#">2018</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
$('.slider').slider();
$(".dropdown-button").dropdown({
hover: true
});
});
</script>
Here is my full code: https://codepen.io/bukuchaga/pen/Zjqvxe
Thanks again.
You are doing it wrong, you should know how the position properties work. You are using position relative. so when you use position relative it means relative to itself not from something else. Next time keep in mind how these tricky things works so that it won't waste your time in resolving the error caused by them.
I have seen your code, the css wrapper class nav .nav-wrapper has a wrong relative position.
You don't need to use relative position here because, It is unnecessary. So, remove it and your code will work like a charm.
If you have any other error in design, post another question and if i or someone else has answered your question marked my or someone answer as accepted so that this thread can be closed. Thanks.
It kind of worked when I removed position: relative property from the style class nav .nav-wrapper. You can either remove it or override it with position: inherit.
I want to create something similar at this example:
http://users.ox.ac.uk/~rahtz/test4.html
It's something where your annotations appear as mouse-over outlines with boxes displaying the annotations position on relative images. I think it could be done also with some javascript tips, as the example above. Maybe generating from xsl for each tag p a new tag span with attributes reference onMouseOver connected with javascript function.
In my xml structure i have used the facsimile elements for display images, and also the zone elements with coordinates and xml:id for define the portion of text. These zone elements represents an area inside surface element (maybe connected to some texts).
You can see my xml/xsl structure here: Xsl/Xml Issue structure generating html tags
Approximately i think i have to generate something like this:
<div id="contenitore-immagine">
<img class="dimensioni" src="tavole/1.jpg">
<div class="zone" id="line1">
</div>
<div class="zone" id="line2">
</div>
<div class="zone" id="line3">
</div>
<div class="zone" id="line4">
</div>
<div id="contenitore-testo-annotato">
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line1')" onMouseOut="hideLine('line1')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line2')" onMouseOut="hideLine('line2')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line3')" onMouseOut="hideLine('line3')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line4')" onMouseOut="hideLine('line4')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
</div>
<div id="contenitore-immagine">
<img class="dimensioni" src="tavole/2.jpg">
<div class="zone" id="line5">
</div>
<div class="zone" id="line6">
</div>
<div class="zone" id="line7">
</div>
<div class="zone" id="line8">
</div>
<div id="contenitore-testo-annotato">
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line5')" onMouseOut="hideLine('line5')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line6')" onMouseOut="hideLine('line6')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line7')" onMouseOut="hideLine('line7')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
<ul class="ul-testo-annotato">
<li class="li-testo-annotato">
<span onMouseOver="showLine('line8')" onMouseOut="hideLine('line8')">
<p class="p-testo-annotato">My text...</p>
</span>
</li>
</ul>
</div>
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;}
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.