Header Blog Responsive - Nama Blog plus Navigasi Menu

Header Blog Responsive - Nama Blog plus Navigasi Menu

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.


Header Blog Responsive - Nama Blog plus Navigasi Menu

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).*

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

Related Posts

0 Komentar untuk "Header Blog Responsive - Nama Blog plus Navigasi Menu"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *