CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 5 Today
» 1 Yesterday
» 6 Week
» 19 Month
» 325 Year
» 475 Total
Record: 35 (09.11.2018)

Prepare alternative navigation

Now it's time to think of alternative navigation. This will be used on some medium and small devices (depending on their resolution). Good place is on the top of the webpage. The Alt. navigation will be expandable downward.

 

template.htm

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="body">
	<div class="alt-nav">
		<!-- alternative navigation container -->
		<div class="btn">
			<!-- alt-nav button -->
			BTN
		</div>
		<div class="nav">	
			<!-- alternative navigation START-->
			ALTERNATIVE NAVIGATION
		</div>		
	</div>
	<div class="top-container inner">
		<!-- top-container -->
...

 

 

stylesheet.css

...
/*** step 5 ***/
/* alternative navigation */
.alt-nav{
	width: 100%;
	height: 30px;
	display: block;
	background: #666;
	overflow-y: hidden;
	position: fixed;
	z-index: 100;
}
.alt-nav:hover{
	overflow-y: visible;
	width: 100%;
}

.nav{
	width: 100%;
	margin-top: 30px;
	text-align: left;
	background: #888;
}

 

 

PREVIEW

 

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED