About Orange Spice

masterlie Orange Spice is free CSS template from Orange spice website. You may download, modify and apply this template for your websites. Credits go to Free Photos for photos used in this template and cjj675 for Photoshop brushes.

Validate XHTML & CSSGame online!

SEPUTAR INFORMASI
BERITA TERPERCAYA

LOWONGAN KERJA

HIBURAN

TOKO ONLINE
.

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:

Web Design

Online Marketing

Advertising

Multimedia

About Orange Spice

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