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) menyerupai gambar ini.


 Nama Blog plus Navigasi Menu dan cara memasangnya Header Blog Responsive - Nama Blog plus Navigasi Menu

CSS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas aba-aba ]]></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 aba-aba <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 aba-aba </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.idtutorial.com).*

See the Pen Header plus Menu Blogger by CB Blogger (@cbblogger) on CodePen.

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours