Hello,
In need of some help here. I want to create a navigation menu where the menu shows when I mouse over a picture and the menu disappears on mouse out. Till here things worked out (see Greece/Persia pic: www.laiglewargames.com). Problem is when I am on the menu and wanting to select a naviagation item the menu does not remain stable and ofcourse when I go out of the pic it disappears. What is the solution for this?
Thanks in advance,
Jurgen
My guess is they are looking for the below BUT I doubt they will be back. Hover should be replaced by an onclick event. You would need to then somehow provide an 'alert' that the images need to be clicked to show the menus.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>L'Aigle Wargames</title>
<style>
img {
max-width: 100%;
height: auto;
}
body {
background-image: url(http://www.laiglewargames.com/pictures/GradientSpacer.jpg);
background-repeat: repeat-x;
background-color: #FFFFCD;
}
.page-wrapper {
width: 87%;
margin: 50px auto;
border: 2px solid #670097;
background-color: #CC996B;
}
.contact-button {
width: 200px;
margin: 30px auto 15px auto;
}
.image-plate {
width: 696px;
margin: 0 auto 25px auto;
padding: 0;
position: relative;
}
.image-plate nav {
position: absolute;
top: -50px;
right: -200px;
background-color: #DCBB8C;
padding: 25px 25px 15px 25px;
border: 2px solid #670097;
z-index: 100;
}
.image-plate nav ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
margin: 0;
padding: 0 0 20px 0;
color: #670097;
font-family: "Times New Roman", Serif;
font-style: italic;
font-size: 18px;
font-weight: 600;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.image-plate nav').hide();
$('.image-plate').mouseenter(function() {
$('.image-plate nav').fadeOut();
$(this).find('nav').fadeIn(500);
});
$('.image-plate').mouseleave(function() {
$('.image-plate nav').fadeOut(500);
});
});
</script>
</head>
<body>
<div class="page-wrapper">
<img src="http://www.laiglewargames.com/pictures/L%27AigleHeader.jpg" alt="" style="border-bottom: 2px solid #670097">
<figure class="contact-button">
<a href="http://www.laiglewargames.com/ContactPage.html"><img src="http://www.laiglewargames.com/pictures/ContactButton.jpg" width="200" height="121" alt=""></a>
</figure>
<!-- end contact-button -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/TheWorldOfGreeceAndPersia.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/Rome,-hammer-of-conquest.png"" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/DarkAges.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/Renaissance.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/Reformation.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/SunKingRevolution.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/Napoleon.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
<figure class="image-plate">
<nav>
<ul>
<li><a href="GreecePersiaPeloponneseTaras.html">1. Early Peloponnese & Taras</a></li>
<li><a href="GreecePersiaGreekPersianWars.html">2. Greek-Persian wars</a></li>
<li><a href="GreecePersiaSyracuse.html">3. The wars of Syracuse</a></li>
<li><a href="GreecePersiaPeloponnesianWar.html">4. The Peloponnesian War</a></li>
<li><a href="GreecePersiaAlexanderTheGreat.html">5. Alexander the Great</a></li>
<li><a href="GreecePersiaDiadochi.html">6. The Diadochi</a></li>
<li><a href="GreecePersiaPhotographs.html">Game photographs</a></li>
</ul>
</nav>
<img src="http://www.laiglewargames.com/pictures/WarsOfEmpire.png" width="696" height="200" alt="">
</figure>
<!-- end image-plate -->
</div>
<!-- end page-wrapper -->
</body>
</html>
Already have an account? Login
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices