abrahimsa / lateral-menu-bootstrap-with-icon Goto Github PK

	<style type="text/css">
		body{
			padding: 0;
			margin:0;
		}
		.menu ul{
			list-style: none;
			margin:0;
			padding: 0;
		}
		.menu ul li{
			padding: 15px;
			position: relative;
			width: 250px;
			vertical-align:middle;
			background-color: #34495E;
			cursor:pointer;
			border-top:1px solid #BDC3C7;
		}
		
		.menu ul li:hover{
			background-color: #2ECC71;
		}
		.menu > ul > li{
			border-right: 5px solid#F1C40F;
		}
		.menu ul ul{
			transition: all 0.3s;
			opacity: 0;
			position:absolute;
			border-left:5px solid #F1C40F;
			visibility: hidden;
			left: 100%;
			top: -2;
		}
		
		.menu ul li:hover > ul {
			opacity: 1;
			visibility: visible;
		}
		
		.menu ul li a{
			color: #fff;
			text-decoration: none;
		}
		
		span{
			margin-right: 15px;
		}
		.menu > ul > li:nth-of-type(5)::after{
			content: "+";
			position: absolute;
			margin-left:25%;
			color: #fff;
			font-size:20px;
		}
	</style>

	<style type="text/css">
		body{
			padding: 0;
			margin:0;
		}
		.menu ul{
			list-style: none;
			margin:0;
			padding: 0;
		}
		.menu ul li{
			padding: 15px;
			position: relative;
			width: 250px;
			vertical-align:middle;
			background-color: #34495E;
			cursor:pointer;
			border-top:1px solid #BDC3C7;
		}
		
		.menu ul li:hover{
			background-color: #2ECC71;
		}
		.menu > ul > li{
			border-right: 5px solid#F1C40F;
		}
		.menu ul ul{
			transition: all 0.3s;
			opacity: 0;
			position:absolute;
			border-left:5px solid #F1C40F;
			visibility: hidden;
			left: 100%;
			top: -2;
		}
		
		.menu ul li:hover > ul {
			opacity: 1;
			visibility: visible;
		}
		
		.menu ul li a{
			color: #fff;
			text-decoration: none;
		}
		
		span{
			margin-right: 15px;
		}
		.menu > ul > li:nth-of-type(5)::after{
			content: "+";
			position: absolute;
			margin-left:25%;
			color: #fff;
			font-size:20px;
		}
	</style>

	<div class="menu">
		<ul>
			<li><a href=""><span class="glyphicon glyphicon-user"></span>Manage Admin users</a></li>
			<li><a href=""><span class="glyphicon glyphicon-link"></span>Manage Roles &amp; rights to admin users</li>
			<li><a href=""><span class="glyphicon glyphicon-erase"></span>Manage CMS Pages with content</li>
			<li><a href=""><span class="glyphicon glyphicon-star-empty"></span>Manage Premium Account Plan (3/ 6/ 12 months)</li>
			<li><a href=""><span class="glyphicon glyphicon-pencil"></span>Manage User Registration +</a>
				<ul>
					<li><a href=""><span class="glyphicon glyphicon-cog"></span>Account Management +</a>
						<ul>
							<li><a href=""><span class="glyphicon glyphicon-inbox"></span>Manage Upgrades Request</a></li>
							<li><a href=""><span class="glyphicon glyphicon-usd"></span>Manage Payment Received</a></li>
							<li><a href=""><span class="glyphicon glyphicon-calendar"></span>Manage Reminders for Renewals</a></li>
							<li><a href=""><span class="glyphicon glyphicon-th"></span>Manage Active/Inactive/Expired/Free/Premium Users</a></li>								
							<li><a href=""><span class="glyphicon glyphicon-ban-circle"></span>Manage Flagged/Banned Users</a></li>
						</ul>
					</li>
					<li><a href=""><span class="glyphicon glyphicon-user"></span>Manage Users Profile +</a>
						<ul>
							<li><a href=""><span class="glyphicon glyphicon-th-list"></span>Basic Profile</a></li>
							<li><a href=""><span class="glyphicon glyphicon-film"></span>Video File for Video Profile</a></li>								
							<li><a href=""><span class="glyphicon glyphicon-thumbs-up"></span>Reviews / Feedback</a></li>
						</ul>
						
					</li>
					<li><a href=""><span class="glyphicon glyphicon-comment"></span>Chat Management (one to one)</a></li>
				</ul>
			</li>
			<li><a href=""><span class="glyphicon glyphicon-envelope"></span>Manage Push notifications</a></li>
			<li><a href=""><span class="glyphicon glyphicon-open-file"></span>Manage Newsletter</a></li>
			<li><a href=""><span class="glyphicon glyphicon-list-alt"></span>Ad Hoc Reporting</a></li>
		</ul>
	</div>