bro to the point aja ya, kalo salah kamar maaf dah bingung kebanyakan sticky post
intinya gue baru iseng nih coba coba html jquery dan bootstrap
ini codingnya
coba bro tolong liatin gue salahnya dimana, gue udah ganti class ke offcanvas semua, tapi ngga work, sorry ngga buat fiddlenya, kalo mau test run langsung
http://stackoverflow.com/questions/3...lideoff-canvas
mohon pencerahan, +1
: yang jawab atau ngasih suggest edit dimana
Quote:
Original Posted By jquery[removed][removed]
[removed]
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
[removed]
Quote:
Original Posted By cssbody {
background-color: #000000;
}
/* logo atas start */
.site-branding {
width: 100%;
max-width: 310px;
margin: 45px auto 35px;
margin-bottom: 2%;
margin-top: 3%;
text-align: center;
background-color: white;
}
.my-image {
transition : 2s;
width : 100px;
height : 100px;
}
background-color : transparent;
}
.my-image:hover {
background-color : rgb(0, 168, 255);
}
@media (max-width: 769px) {
.site-branding {
width: 0% !important;
text-align: center;
}
}
.img-responsive {
margin: 0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner,
.navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
@media (min-width: 768px) {
.navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.navbar-nav {
float: none !important;
}
}
.navbar-nav > li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}
li a:hover i.fa-youtube-play {
color: red;
transition: 1s;
}
/*end about us*/
Quote:
Original Posted By html5[<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
[removed][removed]
[removed][removed]
<body>
<div class="site-branding">
<a href="project" rel="home">
<img src="project" alt="project" class="img-responsive my-image" />
</a>
</div>
<nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><B><I>All Collection Portfolio</B></I></a>
</li>
<li class="divider"></li>
<li><a href="#">Collection 1</a>
</li>
<li><a href="collection2.html"></i>Collection 2</a>
</li>
<li><a href="#">Collection 3</a>
</li>
<li class="divider"></li>
<li><a href="#">Cita Tenun Indonesia</a>
</li>
</ul>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact us</a>
</li>
<li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a>
</li>
</ul>
</div>
</nav> <!-- end navigation button-->
</body>
<!-- javascript -->
