New form of designWOODenBlock

Template License

Tags: css, Template, tutorial

Cara menambah kode css navbar menu dengan link id aktif versi web

Menu Navbar Css

Hai Gues?

- Entah benar atau tidak judulnya, kira-kira: cara menambah navigasi menu dengan css memakai id aktif, yang penting ane mau iklas berbagi. Lansung saja simak baik-baik triknya: tidak biasa basa basi soalnya. 0key' ambil kodenya:/*****HTML VERSI WEB*****/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Cara menambah kode css navbar menu dengan link id aktif versi web - Dunia Gratisan</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> /*==== Cara menambah navigasi menu header css versi web====*/ /**********CSS NYA**********//****Kalau mau di pakai cssnya saja, ambi dan taruh di antara Head body seperti ini ***/ <style type="text/css">#navcontainer{background:#369; border-top: 1px solid #9CC; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;} #navlist{list-style: none outside none;margin:0;padding: 0;} @media all{#navlist{text-align: center}} #navlist li{bottom: 11px; display:inline; line-height: 1.2em; margin: 0; padding: 0; position: relative;} html body #navlist li{ background:#000; margin:0 3px 0 0; padding:4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin:0; padding:3px 5px 3px 5px; position:relative; right: 2px; text-decoration:none;} #navlist a:hover{ background:#C00; bottom:1px; color: #FFF;position: relative; right: 1px;} #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px;} #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding:0; position:relative;} html>body #navlist li#active{ background: #000; margin: 0 4px 0 4px;} #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover{ background:#369; border-bottom:none; border-left:1px solid #9CC; border-right:1px solid #9CC; border-top:1px solid #9CC; bottom:0; color:#FFF;cursor:text;margin:0;padding:2px 5px 0 5px; position:relative;right:0;}</style> </*head><*body> /******INI DIA HTML NYA******/ <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="/" id="current">Homepage</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div>Terimakasih Demo Css

Back to posts

Comments: