Menu CSS


Aduh udah lama ni blog ga gua sentuh- sentuh lagi Kali ini gua coba sharing mengenenai CSS. Pembahasan kali ini adalah meberikan manipulasi Menu horizoontal yang selalu di tengah – tengah browser.

Oqelah Qalo Bek bek begitu (warteg boyz), kita mulai dengan membuka Aplikasi editor yang elu suka.

Tag HTML

Letakan coding di bawah ini diantara tag <body>{{ disinii}}</body>

<div id="centermenu">
<ul>
<li><a href="#">Tab one</a></li>
<li><a href="#">Tab two</a></li>
<li><a href="#">Tab three</a></li>
<li><a href="#">Tab four</a></li>
</ul>
</div>

Centered Menu CSS

Di bawah ini adalah pusat CSS digunakan untuk tab di halaman.

Buka tag di bawah tag head dan letakan code css di antara tag <style type=”text/css”>{{di sini}} </style>

#centermenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#centermenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centermenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centermenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centermenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centermenu ul li a.active,
#centermenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Gampang bukan.🙂

6 thoughts on “Menu CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s