Horizontální menu

 <div id="nav">           
      <ul>                 
        <li>        
        <a class="active" href="#" onClick="goto('#about', this); return false">About</a>        
        </li>                 
        <li>        
        <a href="#" onClick="goto('#work', this); return false">Work</a>        
        </li>                 
        <li>        
        <a href="#" onClick="goto('#contact', this); return false">Contact</a>        
        </li>           
      </ul>    
    </div>    
    <div id="content">                
      <div class="contentbox-wrapper">                      
        <div id="about" class="contentbox">            <h3>About</h3>                        
          <div style="width: 400px;">                         
            <p class="a8" >                                                     
              <hg class="pruhledny-alpha">                           
<?
$soubor = fopen("textd.txt", "r");
$text = fread($soubor, 50000000);
echo($text);
fclose($soubor);
                                ?>             
          </div>          
          <hg>                                      
            </p>                 
        </div>                   
        <div id="work" class="contentbox">            <h3>Work</h3>                       
          <p>Lorem ipsum dolor ...           
          </p>                 
        </div>                   
        <div id="contact" class="contentbox">            <h3>Contact</h3>                       
          <p>Lorem ipsum dolor ...            
          </p>                 
        </div>           
      </div>       
    </div>

<style>body{ overflow-x: hidden; overflow:hidden; }   #nav {          margin-top:5px;     background-color: grey;          border-bottom: 5px solid #DDDDDD;     padding: -5px -5px; }   #nav ul li{          position: relative; top: 0;     font-size: 40px;     display:inline;     margin-right:15px;      }   #nav a.active {     font-weight:bold;     color:black; } #content{           overflow:hidden;     -moz-box-shadow: 0 0 10px 10px #ccc;     -webkit-box-shadow: 0 0 10px 10px #ccc;     box-shadow: 0 0 5px 5px #ccc; }  .contentbox-wrapper{      position:relative;     left:0%;     width:4000px;     height:86%;     }  .contentbox{          width:32%;     height:95%;     float:left;     padding:20px;     background-image: url("img/article.jpg") ;    }       
    </style>

<script>
function goto(id, t){
    
    $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
 
    
    $('#nav a').removeClass('active');
 
    
    $(t).addClass('active');
}
</script>