With the use of coding skill like
HTML (Hypertext Markup Language),
CSS (Cascading Style Sheets) you can do anything on your browser.
This is another kind of new way to express the power of Frontend coding.
Here you can learn “Header With CSS”.
You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.
If you don’t understand clearly so you can watch youtube videos which mention at the end of the page.
HTML
HEAD SECTION
<head>
<title>Header</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>BODY SECTION
<nav class="slidemenu">
<!-- Item 1 -->
<input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
<label for="slide-item-1"><p class="icon">♬</p><span>Home</span></label>
<!-- Item 2 -->
<input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<label for="slide-item-2"><p class="icon">★</p><span>About</span></label>
<!-- Item 3 -->
<input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
<label for="slide-item-3"><p class="icon">✈</p><span>Folio</span></label>
<!-- Item 4 -->
<input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
<label for="slide-item-4"><p class="icon">✎</p><span>Blog</span></label>
<div class="clear"></div>
<!-- Bar -->
<div class="slider">
<div class="bar"></div>
</div>
</nav>CSS
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.slide-toggle{
display: none;
}
.slidemenu{
font-family: arial, sans-serif;
max-width: 600px;
margin: 50px auto;
overflow: hidden;
}
.slidemenu label{
width: 25%;
text-align: center;
display: block;
float: left;
color: #333;
opacity: 0.2;
}
.slidemenu label:hover{
cursor: pointer;
color: #666;
}
.slidemenu label span{
display: block;
padding: 10px;
}
.slidemenu label .icon{
font-size: 20px;
border: solid 2px #333;
text-align: center;
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
line-height: 50px;
border-radius: 50%;
}
/*Bar Style*/
.slider{
width: 100%;
height: 5px;
display: block;
background: #ccc;
margin-top: 10px;
border-radius: 5px;
}
.slider .bar{
width: 25%;
height: 5px;
background: #333;
border-radius: 5px;
}
/*Animations*/
.slidemenu label, .slider .bar {
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
}
/*Toggle*/
.slidemenu .slide-toggle:checked + label{
opacity: 1;
}
.slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }YouTube
Like Our Facebook Page For Update!
Read More
- Oneplus 10 Pro Specification
- Google New Policy Will Kill Third-Party Call Recording Apps
- WhatsApp Pay Can Now Be Rolled out to 100 Million Users
- Elon Musk Now Wants to Buy Twitter
- Things aren’t “back to normal” yet but GPU prices are…
Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.
I see you don’t monetize oncefollow.com, don’t waste your traffic, you can earn additional cash every month with new monetization method.
This is the best adsense alternative for any type of
website (they approve all sites), for more info simply
search in gooogle: murgrabia’s tools
Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.