Mywapmaster

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><meta name="keywords" content="Fre mobile css| fre desktop templates" /> <meta name="description" content="Fre mobile css| fre desktop templates" /> <link rel="canonical" href="http://masterlie.wapsite.me/koleksi/Bosmasterlie/__xtblog_entry/10949377-cara-menambah-kode-css-navbar-menu-dengan-link-id-aktif-versi-web?__xtblog_block_id=1" /><link rel="alternate" type="application/rss+xml" title="RSS" href="http://masterlie.wapsite.me/koleksi/Bosmasterlie?__xtblog_rss=VHhBcUZ5ZzRZYUkwTTN5dXAyVkpIVWt1RFJ1enF1NXBzSmN5R1RrdA==" /> <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:

Wellcome

Welcome to My websites

Koleksi Templates

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

Informasi File

Koleksi web template

Nama : FRES template
Upload : 2017-03-21
Size: 6.9 KB
Lihat| Download

Nama : AB themes
Upload : 2017-03-21
Size: 6.8KB
Lihat | Download

Nama : Aero
Upload : 2017-03-21
Size: 5.13KB
Lihat | Download

Nama : Alishba
Upload : 2017-04-03
Size: 5KB
Lihat | Download

Nama : Alviant
Upload : 2017-02-10
Size: 6.24KB
Lihat | Download

Nama : Andreas
Upload : 2017-02-22
Size: 7.56KB
Lihat | Download

12 3 4...34 35 36 »

Salah satu thema di atas mungkin tidak bekerja pada browser tertentu, & source buat copy codenya.