This is my first website using purely HTML/CSS. All of my past markup exerience has been using Rapidweaver for site developement. That said, my goal is to make this website responsive. While I think I have made much progress, I have locked myself into a nav bar that I do not like, but seems to be my only option. This is the page in question:
If you view this page in a browser wider than 480px, the menu works just fine. (Only two pages are ‘active’: Hand Tools / Chisels and / Saws. The latter is incomplete.) However, when viewed at an iPhone and you scroll to the bottom of the ‘content’, you will see the nav menu. If you try to select ‘Hand Tools’ you will find that its sub-menu selections do not appear.
If anyone can shed some light on why the navigation bar has become non-operational I would be most grateful. And also, if anyone can suggest a better responsive alternative to this menu that would also be great.
The problem is that although the menu is working on the iphone the page navigates to the top of the screen and you can’t see it.
If you add a non existent destination into the trigger anchor the page will work.
e.g.
<a href="#nogo">HAND TOOLS</a>
Working demo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width-device-width">
<title>Wood Working By Design | Hand Tools | Chisels</title>
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<link href="css/chisels.css" rel="stylesheet">
<link href="css/siteNav.css" rel="stylesheet">
<style>
body {
background:#333
}
.nav ul {
list-style: none outside none;
margin-left: 2%;
padding: 0;
}
.nav {
/*background-color: red;*/
display: block;
padding: 10% 0 0 6%; /* --- top padding ---*/
/* position: absolute; */ /*--- out 20JAN2014 -----*/
/*left: 30px;*/
/*border: 1px solid white;*/
/*top: 300px;*/
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
.nav ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
/*border: 1px solid red;*/
/*
* do NOT REMOVE following 'absolute' because it will
* expand the main menu titles. do not know why?
*/
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
.nav li {
position: relative;/*border: 1px solid gray;*/
}
.nav > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/*-- Stuart's code ---*/
/*width: 120px;*/
width: 140px; /*-- test code ---*/
}
/*#nav li a { ---- ORIG CODE ---------------------*/
.nav li {
/*
I JUST ADDED THESE TO SEE WHAT THE WIDTHS WERE ---
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
END OF BORDER STUFF
*/
/*color: #C0C0C0;*/ /*-- font color of main nav items ---*/
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px; /*--- PADDING FOR MAIN NAV ITEMS ---------*/
text-decoration: none;
/*--- STUARTS CODE ---*/
width: 120px; /*--- OK THIS IS WIDTH OF MAIN MENU ITEMS CONTAINER ----------------------*/
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.nav li a {
text-decoration: none; /* I ADDED THIS TO GET RID OF THE UNDERLINE */
color: #C0C0C0;
}
.nav li:hover > a {
border-color: #8899AA;
color: #FFFFFF;
}
.nav li:hover ul.subs {
/*
NOTE IT APPEARS THAT THERE CANNOT BE A GAP BETWEEN THE MAIN MENU ITEMS AND THE
SUB MENU ITEMS ELSE YOU WILL NOT BE ABLE TO GRAB THE SUB MENU ITEM
AS SEEN BELOW, 131PX IS THE CORRECT WIDTH SO THAT BOTH CONTAINERS JUST TOUCH ONE ANOTHER
*/
/*left: 131px;*/ /*--- THIS IS DISTANCE FROM LEFT EDGE OF MAIN MENU ITEM TO LEFT EDGE OF SUB MENU --*/
/*-- note the following dimension CANNOT BE A % esle it will not work --*/
left: 115px; /*-- 20JAN2015 changed from 131px --*/
opacity:1;
/*
WE NEEDED TO RAISE THE SUB TITLES UP IN LINE WITH TOP OF MAIN MENU ITEM.
USING -5px DID THE TRICK
*/
top: -5px; /*--- MY CODE ---------*/
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.nav ul li {
width: 180px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<div class="navigation">
<ul class="nav">
<li><a href="home.html">HOME</a>
<li><a href="#nogo">HAND TOOLS</a>
<ul class="subs">
<li><a href="chisels.html">CHISELS</a></li>
<li><a href="hand_saws.html">HAND SAWS</a></li>
<li><a href="#">HAND PLANES</a></li>
<li><a href="#">WOODEN PLANES</a></li>
<li><a href="#">HAND SCRAPERS</a></li>
</ul>
</li>
<li><a href="#nogo">POWER TOOLS</a>
<ul class="subs">
<li><a href="#">JOINTER</a></li>
<li><a href="#">PLANER</a></li>
<li><a href="#">BAND SAW</a></li>
<li><a href="#">TABLE SAW</a></li>
<li><a href="#">ROUTER</a></li>
<li><a href="#">SHOP VAC</a></li>
<li><a href="#">BELT SANDER</a></li>
<li><a href="#">RADIAL-ARM SAW</a></li>
</ul>
</li>
<li><a href="#nogo">JOINERY</a>
<ul class="subs">
<li><a href="#">DOVETAILS</a></li>
<li><a href="#">MORTISE and TENON</a></li>
<li><a href="#">BOX JOINTS</a></li>
<li><a href="#">FLOATING TENONS</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</li>
<li><a href="#nogo">VENEERING</a>
<ul class="subs">
<li><a href="#">HIDE GLUE</a></li>
<li><a href="#">GLUE POT</a></li>
<li><a href="#">VENEERING TOOLS</a></li>
<li><a href="#">VENEERING PROCESS</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</li>
<li><a href="#nogo">SHARPENING</a>
<ul class="subs">
<li><a href="#">TORMEK</a></li>
<li><a href="#">SHARPENING GUIDES</a></li>
<li><a href="#">WATERSTONES</a></li>
<li><a href="#">CERAMIC STONES</a></li>
<li><a href="#">HARD ARKANSAS</a></li>
<li><a href="#">BELT SANDER</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</li>
<li><a href="#nogo">MORE</a>
<ul class="subs">
<li><a href="#">GOOD READS</a></li>
<li><a href="#">WOOD</a></li>
<li><a href="#">PHOTOGRAPHY</a></li>
<li><a href="#">WEBSITE BUILDING</a></li>
<li><a href="#">FAVORITE THINGS</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</li>
</ul>
</div>
<!-- end of navigation div -->
</div>
<!-- end of wrapper div -->
</body>
<footer>Copyright @ 2014 Phillip Anthony Briles</footer>
</html>
Hover menus kind of suck on small devices and click menus are a better option although you will need js for them.
I usually do this type of thing and use the hamburger menu approach (ignore the garish colours).
Also I prefer the menu at the top on mobile and it was a real pain to scroll all the way to the bottom on your example to get to the menu.
There are many other methods such as off the side navigation which work quite well also.
@PaulOB
Thank you very much for your detailed response. I had no idea hover navigation bars would be problematic on touch devices, which exposes my inexperience. I will add your markup to my HTML file and learn from it. I will also create a new stylesheet to build a non-hover menu with the width of a horizontal iPad (or thereabouts) and trigger it from my media query.
Thanks again. Your help was extremely helpful. Lesson learned.