amin007 1 Report post Posted June 19, 2012 UI : Belajar bootstrap dari website [url="http://www.w3resource.com/twitter-bootstrap/"]http://www.w3resource.com/twitter-bootstrap/[/url] ubahsuai [url="http://peribadi.amin007.org/js/cth_bootstrap/nav-menu.php"]http://peribadi.amin007.org/js/cth_bootstrap/nav-menu.php[/url] ada masalah pada anjung > examples > c > ada blok selepas A,B,C adalah 1,2,3 ada syor???Contoh koding html... [CODE] <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nav Menu</title> <meta name="description" content="Twitter Bootstrap tab based dropdown Navigation Example"> <link href="bootstrap/css/bootstrap2.0.1.css" rel="stylesheet"> <style type="text/css"> .container { margin-top: 200px; } /* submenu */ .nav li.dropdown ul.dropdown-menu li:HOVER ul { display:block; position:absolute; left:100%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .nav li.dropdown ul.dropdown-menu ul { display: none; float:right; position: relative; top: auto; margin-top: -30px; } .nav li.dropdown ul.dropdown-menu .dropdown-menu::before { content: ''; display: inline-block; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left:7px solid #CCC; border-left-color: rgba(0, 0, 0, 0.2); position: absolute; top: 9px; left: -14px; } .nav li.dropdown ul.dropdown-menu .dropdown-menu::after { content: ''; display: inline-block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left:6px solid white; position: absolute; top: 10px; left: -12px; } /* caret ke kanan */ .caret-right { content: ''; display: inline-block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left:6px solid white; position: absolute; } </style> </head> <body> <!-- menu utama --> <div class="container"> <row class="span6"> <!-- ul mula --> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <li class="divider"></li> <li><a href="#">Examples</b></a> <ul class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Anjung<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <li class="divider"></li> <li><a href="#">Examples</a> <ul class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a> <ul class="dropdown-menu bottom-up pull-right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider">-</li> <li><a href="#">Live Demos</a></li> </ul> </li> </ul> <!-- ul tamat --> </div> </div> <!-- skrip daa --> <script src="bootstrap/js/layout2/jquery.js"></script> <script src="bootstrap/js/layout2/bootstrap-dropdown.js"></script> <script src="bootstrap/js/layout2/application.js"></script> </body> </html> [/CODE] Quote Share this post Link to post Share on other sites