เป็นรูปแบบการจัดวาง layout ของภาษา html และ css โดยจะเป็น menu ดังตัวอย่าง
Examplediv.menu
{
width: 100%;
height: auto;
text-align: center;
}
div.menu ul
{
width: auto;
height: 40px;
margin: 20px 0px 0px;
padding: 0px;
list-sytle: none;
border-bottom: 4px solid #C8DCF0;
}
div.menu ul li
{
width: auto;
height: 30px;
margin: 0px;
padding: 0px;
display: inline;
}
div.menu ul li a
{
width: auto;
height: auto;
margin: 0px 3px;
padding: 5px 10px 5px;
display: inline-block;
font-weight: bold;
color: #4c7fb3;
border-left: 1px solid #C8DCF0;
border-top: 1px solid #C8DCF0;
border-right: 2px solid #C8DCF0;
text-decoration: none;
}
div.menu ul li a:hover,
div.menu ul li.selected a
{
padding: 12px 15px 12px;
text-transform: uppercase;
border-right: 4px solid #C8DCF0;
}
<div class='menu'> <ul> <li class='selected'><a href='http://code.function.in.th' title='Code'>Code</a></li> <li ><a href='http://sourcecode.function.in.th' title='SourceCode'>SourceCode</a></li> <li ><a href='http://program.function.in.th' title='Program'>Program</a></li> <li ><a href='http://code.function.in.th' title='Code'>Code</a></li> <li ><a href='http://sourcecode.function.in.th' title='SourceCode'>SourceCode</a></li> <li ><a href='http://program.function.in.th' title='Program'>Program</a></li> </ul> </div>