CMSimple-XH

CMSimple_XH Horizontal Navigation Tutorial

Visitor Statistics
» 1 Online
» 1 Today
» 0 Yesterday
» 1 Week
» 1 Month
» 14 Year
» 260 Total
Record: 49 (09.11.2018)

Welcome

Welcome to CMSimple_XH Horizontal navigation Tutorial. This tutorial is a visualized version of svasti's tutorial . If you see this page, you have successfully instaled CMSimple_XH and thus you know basic features of it. Concerning the navigation, you know this is generated automatically. Having written pages you may see the navigation about like this 

Lest start modifying this navigation to a horizontal oriented. This is about the project:

navigation.jpg
And this is the generated code in content.htm:
<div class="navigation">
	<ul class="menulevel1"> <!-- 1st level START -->
	    <li class="doc"><a>PAGE 1</a></li> 
	    <li class="docs"><a>PAGE 2</a> <!-- 2nd page group START -->
	    	<ul> <!-- 2nd level START -->
		        <li class="doc"><a>PAGE 2.1</a></li>
		        <li class="docs"><a>PAGE 2.2</a> <!-- 3rd page group START -->
			        <ul>  <!-- 3nd level START -->
			            <li class="doc"><a>PAGE 2.2.1</a></li>
			            <li class="doc"><a>PAGE 2.2.2</a></li>
			            <li class="doc"><a>PAGE 2.2.3</a></li>
			            <li class="doc"><a>PAGE 2.2.4</a></li>
			        </ul> <!-- 3rd level END -->
			    </li> <!-- 3rd page group END -->
			    <li class="doc"><a>PAGE 2.3</a></li>
			    <li class="doc"><a>PAGE 2.4</a></li>
	    	</ul> <!-- 2nd level END -->
	    </li> <!-- 2nd page group END -->
	    <li class="doc"><a>PAGE 3</a></li>
	    <li class="doc"><a>PAGE 4</a></li>
	</ul> <!-- 1st level END -->
</div>
Prepare the stylesheet.css:
/*** HORIZONTAL NAVIGATION TUTORIAL ***/
/*** CMSimple_XH ***/
/*** step 1 ***/
* {
    box-sizing: border-box; margin: 0; padding: 0;
}
.clear{
	clear: both;
	background: red;
}
body{
	width: 100%;
	margin: 0;
	padding: 0;
	font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#body{
	background: #eee;
}
 
 
top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED