Jump to content
anatak

CSS navigation menu

Recommended Posts

I have a CSS navigation menu that has some problems.

 

you can take a look here http://www.test.anatak.com/

In the mobile version, no content is shown when the menu is not open.
in the desktop version, the content starts right of the menu. You can see an example here http://www.test.anatak.com/en/surfboardRipper3.php

 

a few things I noticed.

in the navigation menu the

<ul class="nav" id="menu">

has no closing </ul> tag.
When I use the closing </ul> tag the first few lines of the content gets under the navigation menu in the desktop version. The mobile version works without problems then.

 

the second thing I tried was putting a div around the navigation menu but that did not solve the problem in the desktop version.
 

Could anyone help me so that the content in the desktop version shows correctly under the menu without having the few first lines hidden by the menu ?

 

 

The CSS is this

/*horizontal navigation style*/
/*Strip the ul of padding and list styling*/
ul.nav {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li.nav {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
li.nav a.nav {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}
/*Hover state for top level links*/
li.nav:hover a.nav {
    background: #19c589;
}
/*Style for dropdown links*/
li.nav:hover ul.nav a.nav {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li.nav:hover ul.nav a.nav:hover {
    background: #19c589;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li.nav ul.nav {
    display: none;
}
/*Make dropdown links vertical*/
li.nav ul.nav li.nav {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li.nav ul.nav li.nav a.nav {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul.nav li.nav a.nav:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul.nav {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li.nav {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul.nav li.nav, li.nav a.nav {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

and the HTML is here (without </ul> and <div></div>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>kite japan</title>
<link rel="stylesheet" type="text/css" href="../horizontalNavigationStyle.css">
</head>
<body>
<div name="language"><a class="nav" href="../en/home.php">
		<img src="../image/language/english50x26.png" alt="English" width="50" height="26">
	</a><br><a class="nav" href="../ja/home.php">
		<img src="../image/language/japanese50x26.png" alt="日本語" width="50" height="26">
	</a><br></div>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul class="nav" id="menu">
	<li class="nav"><a class="nav" href="home.php">HOME</a></li>
	<li class="nav"><a class="nav" href="kite.php">KITES⬇</a>
		<ul class="hidden">
			<li class="nav"><a class="nav" href="kiteXr5.php">XR5</a></li>
			<li class="nav"><a class="nav" href="kiteGts4.php">GTS4</a></li>
			<li class="nav"><a class="nav" href="kiteFree.php">FREE</a></li>
			<li class="nav"><a class="nav" href="kiteSection2.php">SECTION2</a></li>
			<li class="nav"><a class="nav" href="kiteImpact2.php">IMPACT2</a></li>
			<li class="nav"><a class="nav" href="kiteLW.php">LIGHT WIND (LW)</a></li>
			<li class="nav"><a class="nav" href="kiteXr5lw.php">XR5 LW</a></li>
			<li class="nav"><a class="nav" href="kiteGts4lw.php">GTS4 LW</a></li>
			<li class="nav"><a class="nav" href="kiteFreelw.php">FREE LW</a></li>
			<li class="nav"><a class="nav" href="kiteSection2lw.php">SECTION2 LW</a></li>
		</ul>
	</li>
	<li class="nav"><a class="nav" href="twintip.php">TWINTIPS⬇</a>
		<ul class="hidden">
			<li class="nav"><a class="nav" href="twintipFusion3.php">FUSION3</a></li>
			<li class="nav"><a class="nav" href="twintipFusion3lw.php">FUSION3 LW</a></li>
			<li class="nav"><a class="nav" href="twintipChoice2.php">CHOICE2</a></li>
			<li class="nav"><a class="nav" href="twintipBolt2.php">BOLT2</a></li>
		</ul>
	</li>
	<li class="nav"><a class="nav" href="surfboard.php">SURFBOARDS⬇</a>
		<ul class="hidden">
			<li class="nav"><a class="nav" href="surfboardRipper3.php">RIPPER</a></li>
			<li class="nav"><a class="nav" href="surfboard720.php">720</a></li>
			<li class="nav"><a class="nav" href="surfboardGreenRoom.php">GREEN ROOM</a></li>
		</ul>
	</li>
	<li class="nav"><a class="nav" href="bar.php">bar⬇</a>
		<ul class="hidden">
			<li class="nav"><a class="nav" href="barSensor2.php">sensor2</a></li>
			<li class="nav"><a class="nav" href="barSensor2s.php">sensor2S</a></li>
			<li class="nav"><a class="nav" href="barSensor2sPro.php">sensor2S pro</a></li>
		</ul>
	</li>
	<li class="nav"><a class="nav" href="accessory.php">accessory⬇</a>
		<ul class="hidden">
			<li class="nav"><a class="nav" href="pump.php">pump</a></li>
			<li class="nav"><a class="nav" href="fin.php">fin</a></li>
			<li class="nav"><a class="nav" href="strapPad.php">strap & pad</a></li>
			<li class="nav"><a class="nav" href="unhooked.php">unhooked</a></li>
			<li class="nav"><a class="nav" href="trainer.php">trainer</a></li>
		</ul>
	</li>
<div class="siteWrap"> 
<figure>
	<img src="../image/surfboard/RIPPER/CORE_Ripper_3_Top_and_Bottom_Cutout_72dpi_102x200.png" alt="RIPPER 3 Wave Warrior<br><b>ALROUND WAVE</b>" width="102" height="200">
	<figcaption>RIPPER 3 Wave Warrior<br><b>ALROUND WAVE</b></figcaption><!--40 Ripper 3 Intro-->
</figure>
<h2>Ripper 3</h2>
<h3>Wave Warrior</h3>
<p>The new Ripper 3 is our super smooth riding custom glass surfboard. The revised
tail shape, tucked under rails, and slightly reduced width may induce endless
woohoos in just about any waves. Like the ones a Nor'easterly brings to the East
Coast. Or a good low brings to the Great Lakes. We built the ultra comfortable,
Ripper 3 allrounder to feel right at home on big, messy, wind driven lake swell and
the super smooth reefs of Mauritius and Maui. A handcrafted, glass shortboard for all
your road trips, wherever they may take you. The Ripper 3. Your next allround
surfboard-slash-kite surfboard-slash-lightwind weapon.</p>
<p>Sizes: 5'8" 172 cm | 5'10" 178 cm | 6'1" 185 cm</p>
<p>Features:<br>
▪ DESIGNED IN GERMANY. HANDCRAFTED IN PORTUGAL.<br>
▪ ACTIVE FOAM CORE – Superior flex memory.<br>
▪ CLASSIC GLASS COAT – Pros prefer it. So should you.<br>
▪ SHORTBOARD OUTLINE – Optimized for allround wave performance.<br>
▪ NEW: ROUND TAIL – Improved traction and lift for classic, smooth carving turns.<br>
▪ NEW: TUCKED UNDER RAILS – Extreme grip and control in turns.<br>
▪ STRAP-READY – Your choice. Go strapless or add straps.<br>
▪ DOUBLE STRINGER – Manages torsion and supports the strap inserts.<br>
▪ BLUNT NOSE – Safer. And heck, it looks cooler.<br>
▪ THRUSTER FIN SETUP – Optimizes the balance between control and a loose, skatey feel.<br>
▪ ORIGINAL FCS II SYSTEM – The world standard in fin systems.</p>
<p>
<table>
<tr><td>Length</td><td>Width</td><td>Thickness</td><td>Volume L</td><td>Rider's weight</td></tr>
<tr><td>5'8"</td><td>17 7⁄8"</td><td>2 1/16"</td><td>23,0 L</td><td>50 - 75 kg</td></tr>
<tr><td>172 cm</td><td>45,5 cm</td><td>5,2 cm</td><td>23,0 L</td><td> </td></tr>
<tr><td>5'10"</td><td>18 1⁄8"</td><td>2 1⁄4"</td><td>25,0 L</td><td>65 - 90 kg</td></tr>
<tr><td>178 cm</td><td>46 cm</td><td>5,7 cm</td><td>25,0 L</td><td> </td></tr>
<tr><td>6'1" </td><td>18 1⁄2"</td><td>2 3⁄8"</td><td>27,0 L</td><td>80 + kg</td></tr>
<tr><td>185 cm</td><td>47 cm</td><td>6 cm</td><td>27,0 L</td><td> </td></tr>
</table>
</p>
<p>
Delivery: The Ripper 3 comes standard with a CORE Rear Traction Pad, Leash Plug, and FCS II fin boxes.
</p>
<p>
Accessories:<br>
▪ CORE Center Traction Pad<br>
▪ CORE Front Traction Pad<br>
▪ CORE Surf Straps<br>
▪ "FCS II Carver GF Tri Set" Fins<br>
▪ "FCS II Accelerator Neo Glass Tri Set" Fins<br>
▪ "FCS II Accelerator PC Carbon Tri Set" Fins</p><!--41 Ripper 3 description-->
<p>Please visit <a href="https://corekites.com/us/">https://corekites.com/us/</a> for more information.</p><!--17 Contact Us-->
<img src="../image/logo/CORE_black_on_yellow_CMYK_800x244.png" alt="Core logo black on yellow" width="800" height="244">
</div><div style="text-align:center;"><span style="color: #000000;">Copyright © kite japan <?php echo date("Y"); ?>, All Rights Reserved</span></div>
</body>
</html>

Share this post


Link to post
Share on other sites

thank you very much.

 

I am looking at it with palemoon.

The only problem now is when the screen is too wide, the content starts showing on the right side of the menu.

but I just realized i didn't float my content div. So That will solve the problem I think.

 

will check it with chrome

 

Share this post


Link to post
Share on other sites

Hi again,

I am sorry but I was too optimistic. The problem is still there.
I tested it on palemoon, chromium and internet explorer.

 

if you go to http://www.test.anatak.com/en/kiteXr5.php the first two lines are hidden by the menu.
If you make the screen size small enough you trigger the mobile version and you' ll see the hidden lines.

 

another few things I noticed

on IOS (iphone) and chromium an underscore _ is displayed after the flags to change the language.
On palemoon and internet explorer the flags are displayed without the underscore _

I have no idea why that underscore is displayed.

 

I changed the CSS to make the divs float left and clear
 

/*make navigation float left*/
#navigation{
	float: left;
} 
/*make siteWrap float left and clear*/
#siteWrap{
	float: left;
	clear: left;
} 
/*make footer float left and clear*/
#footer{
	float: left;
	clear: left;
	text-align: center;
} 

Share this post


Link to post
Share on other sites
Posted (edited)

another few things I noticed

on IOS (iphone) and chromium an underscore _ is displayed after the flags to change the language.

On palemoon and internet explorer the flags are displayed without the underscore _

 

I have no idea why that underscore is displayed.

Because "text-decoration:none;" isn't being honored for those elements, either because something else in the CSS takes precedence, or because the selector "a.nav" isn't computing with those user-agents. I can verify that assigning "text-decoration:none;" directly to the element will rid it of underscores, but it would be much better/cleaner to do it in the CSS file. Perhaps this?

 

.nav a {
    text-decoration:none;
}
I don't KNOW that this will work (without writing a bunch of code to test it), but it should give you an idea of what to do.

 

the first two lines are hidden by the menu.

If you make the screen size small enough you trigger the mobile version and you' ll see the hidden lines.

Yes; the <UL> element is marked "position:absolute;", so the browser ignores its height in setting up the page. If you can turn off absolute positioning and still have the layout and JS functionality you need, that might solve the issue; the alternative is to enforce some top spacing (margin, padding, positioning) on the #siteWrap DIV.

Edited by dalecosp

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.