CSS based tabs menu

random · 18 Νοεμβρίου 2003

tab menou για σελιδες, χωρις χρηση javascript.

http://www.prabhums.org/weblogs/?postid=278

http://www.alistapart.com/articles/slidingdoors/

το παραδειγμα που δίνει ειναι σε php αλλα γίνεται και με απλη html, χωρις server pages.

to index.php se index.html

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Company Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<style type="text/css" media="all">
@import "grey.css";
</style>
</head>
<body>
<a href="index.html"><h2>Home</h2></a>
<div id="topcontent">
<ul>
	<li class="first"><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Site Map</a></li>
	<li><a href="#">Privacy</a></li>
</ul>
</div>
<div id="topnav">
<ul>
<li><a href="csstabindex.html">Home</a></li>
<li><a href="tab1.html">Tab1</a></li>
<li><a href="tab2.html">Tab2</a></li>
<li><a href="tab3.html">Tab3</a></li>
</ul><br />
</div>
<div id="subnav">
<ul>
<li><a href="#" class="here">Contact HR</a></li>
<li><a href="#">My Tasks</a></li>
<li><a href="#">Site Preferences</a></li>
</ul><br/>
</div>
<div id="mainBody">
<!-- start box -->
<div style="width:40%">
<div class="headerBoxStyle">
  <div class="spacer"></div>
  <div class="headerBox"><span class="left">
  Home Tools</span>
  <span class="right">
  [-][x]</span></div>
  <div class="spacer"></div>
</div>
<div class="bodyBoxStyle">
  <div class="spacer"></div>
  <div class="bodyBox">
  <span class="left">
  Tool Link 1   Tool Link 2
  </span>
  </div>
  <div class="spacer"></div>
</div>
</div>
<!-- end box -->
</div>
</body>
</html>

Σύνδεση

CSS based tabs menu

Προτεινόμενες αναρτήσεις

random

Αρχειοθετημένο

Σύνδεση