August 7, 2018

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.


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.

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Header Blog Responsive - Nama Blog plus Navigasi Menu

Post a Comment

Contact Form

Name

Email *

Message *