How to create sidebar in HTML?
It is very easy to learn how to create sidebar, we can use this html code in Static website and dynamic website also use in e-commerce websites, There are two different styles of sidebar also some widgets use in last box, Try to use this code i think you like it.
First of all we can use div have .box class, In this div we working on listing of category. so in the div of .box we add ul li and have anchor tag use for link. then we are styling on the sidebar.
HTML Code Given Below:
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style type="text/css">
body {margin:0; padding: 0px; font-family: 'Roboto', sans-serif; background-color: #f1f1f1;}
.wrapper{width: 100%; max-width: 1200px; margin: 0 auto;}
section{margin-bottom: 15px;}
.redBg{background-color: #ea0000;}
.blueBg{background-color: #2196f3;}
ul:after{clear: both; content: '';}
a {color: #3c8dbc; text-decoration: none;}
ul{margin: 0px; padding: 0px;}
ul li {display: block; position: relative;}
ul li a{display: block; padding: 10px; color: #757575; padding-left: 25px;}
ul li a:hover {background-color: #3f51b5; color: #fff;}
ul li a:before {
content: "";
position: absolute;
top: 50%;
left: 10px;
margin-top: -2px;
width: 4px;
height: 4px;
background: #999;
border-radius: 2px;
}
ul li a:hover:before{background-color: #fff;}
.floatLeft {float: left;}
.floatRight{float: right;}
.box{background-color: #fff; max-width: 400px; border-radius: 3px;margin-bottom: 20px;width: 100%;box-shadow: 0 1px 1px rgba(0,0,0,0.1); float: left;}
.products-list .productImg{width: 40px; height: 40px; background-color: #d2d6de;}
.products-list .productInfo{margin-left: 40px;}
.products-list .productInfo p{ color: #999; font-size: 14px; margin-top: 0px; margin-bottom: 5px;}
.products-list .item{ border-bottom: 1px solid #f4f4f4;}
.title{ font-size: 18px; font-weight: normal;}
.thumblisting .products-list a:before{display: none;}
.thumblisting .products-list a{padding-left: 10px;}
.thumblisting .products-list .item{margin-top: 10px; margin-left: 10px; margin-right: 10px; padding-bottom: 10px;}
.thumblisting a:hover{background-color: transparent; color: #757575;}
.box h3{margin: 0px; padding: 10px; color: #fff; }
.btn{font-size: 12px; padding: 6px; color: #fff; background-color: #3c8dbc;}
.boxes-3 .box{ width: 30%;min-height: 100px; margin-right: 0.5%; }
.search{border:1px solid #f4f4f4; padding: 10px; margin: 10px 0px 10px 10px; width: 72%; display: inline-block; box-sizing: border-box; }
.textarea{border:1px solid #f4f4f4; padding: 10px; margin: 10px auto; box-sizing: border-box; width: 96%; display: block;}
.search:focus{outline: none;}
.searchbtn{border: none; color: #fff; padding:10px; display: inline-block; cursor: pointer; }
</style>
</head>
<body>
<div class="wrapper">
<h2></h2>
<section class="boxes-3">
<!-- SideBar html Start -->
<div class="box">
<h3 class="title blueBg">Categories</h3>
<ul class="products-list">
<li class="item">
<a href="javascript:void(0)" class="product-title">Title Here</a>
</li>
<li class="item">
<a href="javascript:void(0)" class="product-title">Title Here</a>
</li>
<li class="item">
<a href="javascript:void(0)" class="product-title">Title Here</a>
</li>
<li class="item">
<a href="javascript:void(0)" class="product-title">Title Here</a>
</li>
<li class="item">
<a href="javascript:void(0)" class="product-title">Title Here</a>
</li>
<li class="item">
<a href="javascript:void(0)" class="product-title">All Categories</a>
</li>
</ul>
</div>
<!-- SideBar html End -->
<!-- SideBar html Start -->
<div class="box thumblisting">
<h3 class="title redBg">Category </h3>
<ul class="products-list">
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Dummy paragraph is smooth and easy text.</a>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Printing media for use of dummy text.</a>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">It was popularised in the substitute content.</a>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">You can use and demo to the client.</a>
</div>
</li>
</ul>
</div>
<!-- SideBar html End -->
<!-- SideBar html Start -->
<div class="box">
<h3 class="title blueBg">Widgets</h3>
<ul class="products-list">
<li class="item">
<input class="search" type="text" placeholder="What are you looking for">
<input type="submit" class="btn searchbtn">
</li>
<li class="item">
<input class="search" type="text" placeholder="Your Email">
<input type="submit" class="btn searchbtn" value="Subscribe">
</li>
<li class="item">
<textarea class="textarea" rows="5" placeholder="Your Message"></textarea>
</li>
</ul>
</div>
<!-- SideBar html End -->
</section>
</div>
<!-- .wrapper html ended -->
</body>
</html>
Comments
Post a Comment