View Full Version : show / hide navbar

02-18-2011, 10:20 PM
Ok, here what I'm trying to do :

I have a navbar that I want to show only when the user move his mouse.. not over but anywhere in the slideshow.


Somebody can help

Thanks !

02-18-2011, 10:20 PM
Please help !

02-19-2011, 03:46 AM
this is more of a Javascript issue, you should try posting on that forum!

02-19-2011, 04:11 AM
Hello icimarc,
You'll probably need to tweak this quite a bit. It only hovers at the bottom 40px of the page right now...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #000;
#container {
margin: 0;
overflow: auto;
ul#bottomNav {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
list-style: none;
background: #000;
font: 300 16px/40px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
ul#bottomNav li {position: relative;}
ul#bottomNav li a#navBar {
height: 100%;
width: 100%;
display: block;
text-indent: -9999px;
ul#bottomNav li ul {
height: 40px;
margin: -40px 0 0 60px;
display: none;
ul#bottomNav li:hover ul {display: block;}
ul#bottomNav li ul li {
float: left;
margin: 0 30px 0;
color: #fff;
display: block;
ul#bottomNav li ul li a:hover {color: #52caf5;}
ul#bottomNav li ul li:first-child {
margin-right: 60px;
font-family: Georgia, sans-serif;
font-variant: small-caps;
font-size: 18px;
color: white;
<div id="container">
<ul id="bottomNav">
<li><a href="#" id="navBar">links at the bottom</a>
<li><a href="http://designshack.co.uk/?p=15337">ShutterPics Photography</a></li>
<li><a href="http://designshack.co.uk/?p=15337">About</a></li>
<li><a href="http://designshack.co.uk/?p=15337">Wedding</a></li>
<li><a href="http://designshack.co.uk/?p=15337">Engagement</a></li>
<li><a href="http://designshack.co.uk/?p=15337">Family</a></li>
<li><a href="http://designshack.co.uk/?p=15337">Prices</a></li>
<li><a href="http://designshack.co.uk/?p=15337">Contact</a></li>
<!--end container--></div>

02-22-2011, 11:55 AM
Ok thanks Excavator !

But now I'am wondering how I can add navigation button ( play-pause-prev image-next image ) in the navigation bar on the right side of the window ?

I try to put this code :
<div id="navigation">
<img id="prevslide" src="images/back_dull.png"/><img id="pauseplay" src="images/pause_dull.png"/><img id="nextslide" src="images/forward_dull.png"/>

with some css but the thing is that these button disable the one on my navbar.

Thanks for helping !

02-22-2011, 07:31 PM
It might be easier for you to find a jQuery script that already does what you want. Something like this (http://www.buildinternet.com/project/supersized/) maybe?

If not that one, check here (http://www.google.com/search?q=jQuery+full+screen+slideshow&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1).

02-22-2011, 10:37 PM
The thing is that I'm already using this script but his navigation button goes over my navbar and I can't click anymore on my button on the left side of my nav bar. Here's my site : icimarc.com/photos