Codeshope

Yatay menu codepen

Yatay menu kodu! ( Kaynak: Codepen.io )

HTML Kodu:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="p_menu_wrap">

<div class="p_menu">
    <ul>
      <li class="active"><a href="#">Anasayfa</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">İletişim</a></li>
      <li><a href="#">Z.Defteri</a></li>
      <li><a href="#">Ekstralar</a></li>
    </ul>
</div>

</div>
CSS Kodu:
.p_menu_wrap {
    float:left;
    height:40px;
    background-color:#fff;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
    border:1px solid #d8dbdf;
    }
.p_menu {
    height:40px;
    margin-left:auto;
    margin-right:auto;
padding-right: 20px;
    color:#fff;
    }
.p_menu ul {
padding-left: 20px;

}
.p_menu li a {
text-decoration:none;
color:#000;
}
.p_menu li {
cursor:pointer;

}
.p_menu ul {
list-style-type:none;
float:left;
text-decoration:none;
line-height:40px;
margin:0px;
}
.p_menu ul li {
width:auto;
padding: 0 20px 10px 20px;
height:40px;
text-align:center;
color:#000;
display: inline;
font-size: 16px;
}
.active {
border-bottom:3px solid #b70000;

}
Javascript Kodu:
<script>
$('.p_menu li').click(function(e) {
    e.preventDefault();
    $('.p_menu li.active').removeClass('active');
    $(this).addClass('active');
});
</script>
Önizleme:

Codeshope

Codeshope

Yatay menu codepen

Sitemizde karsılastıgınız hataları bize bildir!

Bu site Webme sunucularında barınmaktadır.