Hier mal ne navi wie googel hat einbau sollte klar sein
Code <style type="text/css">
.nav{
font: 13px/27px "lucida grande",tahoma,verdana,arial,sans-serif;
background-color: #2D2D2D;
border-bottom: 1px solid #000000;
font-size: 13px;
height: 29px;
position: relative;
top: 0px;
left:0px;
width: 1060px;
z-index: 990;
}
.list_item{
height:29px;
cursor:pointer;
float:left;
text-align:center;
display:inline-block;
padding-left:10px;
padding-right:10px;
color:#AAAAAA;
}
.list_item:hover{
background:#4c4c4c; !important;
}
.list_item_active {
background:#4c4c4c; !important;
border-top:2px solid red;
height:27px;
color:white;
}
.search_box{
margin-left:50px;
border:1px solid transparent;
width:300px;
height:27px;
background:whitesmoke;
font-weight:bold;
font-style:italic;
padding-left:5px;
border-radius:10px 10px 0px 0px;
}
</style>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>jQuery Tutorial</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
$(document).ready(function() {
$('.list_item').click(function() {
$('.list_item').removeClass('list_item_active');
$(this).addClass('list_item_active');
});
});
</script>
</head>
<body style="padding:px; margin:0px;background:whitesmoke;">
<div class="nav">
<div class="list_item list_item_active"> Web </div>
<div class="list_item"> Nachrichten </div>
<div class="list_item"> Einladungen </div>
<div class="list_item"> Neuigkeiten </div>
<input type="text" class="search_box" placeholder="Suche..."/>
<div class="list_item" style="float:right;"> Abmelden </div>
</div>
</body>
</html>
www.champstyle.de
|