Header Blog Responsive - Nama Blog plus Navigasi Menu
August 7, 2018
Cara Membuat Header Blog Responsive - Nama Blog plus Navigasi Menu.
HEADER blog atau website ini lagi ngetrend. Simple, responsive, static header. Bisa disebut Header All in One karena navigasi menu sekaligus terpasang di samping header. Penampakannya di HP (mobile) seperti gambar ini.
CSS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode ]]></b:skin>
HTML Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di bawah kode <body>
JS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode </body>
Save! Simpan Template!
Demikian Header Blog Responsive - Nama Blog plus Navigasi Menu dan cara memasangnya. Good Luck and happy blogging! (www.contohblog.com).*
HEADER blog atau website ini lagi ngetrend. Simple, responsive, static header. Bisa disebut Header All in One karena navigasi menu sekaligus terpasang di samping header. Penampakannya di HP (mobile) seperti gambar ini.
CSS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode ]]></b:skin>
.container {
position: relative;
margin: 0 auto;
width:100%;
max-width: 880px;
}
.content {position: relative;}
.content p {
margin-bottom: 10px;
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
}
#header h1 {
/* position: absolute; */
top: 0px;
/* left: 0; */
margin: 0px;
text-transform: uppercase;
font-size: 1.2em;
}
#nav {
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
@media (max-width: 599px) {
#header .container {
width: 100%;
}
#header h1 {
padding-left: 3%;
}
#nav {
width: 100%;
top: 60px;
}
#nav:before {
content: '\2630';
display: block;
position: absolute;
right: 3%;
top: -50px;
line-height: 40px;
font-size: 1.4em;
cursor: pointer;
}
#nav ul {
background: #222;
width: 100%;
margin: 0px;
}
#nav ul li {
float: none;
}
#nav ul li a {
padding: 10px 3%;
line-height: 20px;
border-top: 1px solid #333;
}
#nav ul {
transition: 350ms;
-moz-transition: 350ms;
-webkit-transition: 350ms;
transform: perspective(600) rotate3d(0, 0, 0, 0);
-moz-transform: perspective(600) rotate3d(0, 0, 0, 0);
-webkit-transform: perspective(600) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
}
#nav.open ul {
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: perspective(600) rotate3d(0, 0, 0, 0);
}
}
HTML Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di bawah kode <body>
<header id='header'>
<div class='container'>
<h1>Header Demo</h1>
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
</header>
JS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('#nav').click(function() {
$(this).toggleClass('open');
});
});
//]]>
</script>
Save! Simpan Template!
Demikian Header Blog Responsive - Nama Blog plus Navigasi Menu dan cara memasangnya. Good Luck and happy blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Header Blog Responsive - Nama Blog plus Navigasi Menu
Post a Comment