Right side menu tab with icon

Developer
Parth Viroja
Size
2,480 Kb
Views
36,432
  1. Right side menu tab with icon Previews
  2. Right side menu tab with icon HTML Codes
  3. Right side menu tab with icon CSS Codes

How do I make an right side menu tab with icon?

What is a right side menu tab with icon? How do you make a right side menu tab with icon? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Right side menu tab with icon Previews
IQ Test

Right side menu tab with icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Right side menu tab with icon</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Right Side Tab</h1>
<ul class="tabs right"> <li> <input type="radio" id="tab-1" name="tab" checked /> <label for="tab-1"><i class="material-icons">create</i></label> <div class="tab-content"> <textarea name="link" placeholder="Link of your product"></textarea> </div> </li> <li> <input type="radio" id="tab-2" name="tab" /> <label for="tab-2"><i class="material-icons">insert_photo</i></label> <div class="tab-content"> <div class="drop-img"><i class="material-icons">insert_photo</i></div> </div> </li> <li> <input type="radio" id="tab-3" name="tab" /> <label for="tab-3"><i class="material-icons">format_quote</i></label> <div class="tab-content"> <p class="qto">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p> </div> </li>
</ul>
</body>
</html>

Right side menu tab with icon - Script Codes CSS Codes

* { padding: 0px; margin: 0px; outline: none; font: 20px "Calibri"; font-weight: lighter; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #e39900; overflow: hidden; overflow-y: auto;
}
h1 { font-size: 3em; font-weight: lighter; color: #fff; text-align: center; display: block; padding: 40px 0px;
}
.tabs { position: relative; display: block; margin: 0 auto; width: 50%;
}
.tabs ul{ display:block; text-align:center;
}
.tabs li { display: inline-block; float:right;
}
.tabs:after,
.tabs li:after { content: ""; display: block; clear: both;
}
.tabs input[type=radio] { display: none;
}
.tabs label { position: relative; display: block; padding: 14px 21px; font-size: 20px; top: 4px; font-weight: normal; text-transform: uppercase; background: rgba(0, 0, 0, 0.1); cursor: pointer; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease;
}
.tabs label:hover { background: rgba(0, 0, 0, 0.2);
}
.tabs .tab-content { position: absolute; top: 61px; left: 0; right: 0; display: block; z-index: 2; font-size: 17px; line-height: 25px; padding: 25px; background: #fff; display: none;
}
.tabs input:checked + label { top: 0; padding-top: 17px; background: #fff; box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.2), 4px 0px 0px rgba(0, 0, 0, 0.2), -4px 0px 0px rgba(0, 0, 0, 0.2);
}
.tabs input:checked ~ .tab-content { opacity: 1; display: block; box-shadow: 4px 0px 0px rgba(0, 0, 0, 0.2), -4px 0px 0px rgba(0, 0, 0, 0.2);
}
.tabs textarea { position: relative; display: block; width: 100%; padding: 4px; min-width: 100%; max-width: 100%; border: 0px; min-height: 40px;
}
.drop-img { display: block; margin: 10px; height: 100px; border: 2px dashed #dfdfdf; text-align: center; line-height: 100px; color: #cfcfcf;
}
.qto { padding: 10px;
}
.qto:before { content: '"'; margin-left: -20px; padding: 0px 6px; font-size: 1.4em;
}
.qto:after { content: '"'; margin-right: -20px; padding: 0px 6px; font-size: 1.4em;
}
Right side menu tab with icon - Script Codes
Right side menu tab with icon - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,480 Kb
Views 36,432
Do you need developer help for Right side menu tab with icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
3D-box
Page load animation
Upload Image Form
Custom checkbox and radio with menu
Rotate Circle Pure Javascript
Jquery Tree with checkbox
Filter, sort grid item
Card border collspan
Remove Class On Click Outside
Contextmenu using Jquery
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!