Invoice Script PHP jQuery

Vertical Dot Mobile App Menu Icons Using HTML5 and CSS3

Posted by & filed under CSS, HTML5.

Vertical Dot Icons for mobile app menus will add nice interface look to the application. Here is I will share my knowledge how to create Vertical Dot Mobile Menu Icons Using HTML5 and CSS3.

 

Demo Vertical Dot Menu Icons Using HTML5 and CSS3

 

Vertical Dot Mobile Menu Icons Using HTML5 and CSS3

Vertical Dot Mobile Menu Icons Using HTML5 and CSS3

Step  1:Create unordered list with three li tags in it.

       <ul class="icons btn-left showLeft">
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>

Step 2:

Here css to create vertical dot menu mobile app icons.

                .showLeft{  
			background-color: #0d77b6 !important;
			border:1px solid #0d77b6 !important;
			text-shadow: none !important;
			color:#fff !important;
			padding:10px;
		}
		.icons li {
		    background: none repeat scroll 0 0 #fff;
		    height: 7px;
		    width: 7px;
		    line-height: 0;
		    list-style: none outside none;
		    margin-right: 15px;
		    margin-top: 3px;
		    vertical-align: top;
		}

Here is the full HTML and CSS for Vertical Rectangular Dot Mobile App Menu Icons Using HTML5 and CSS3.

<!DOCTYPE html> 
<html>
<head>
	<title>Vertical Dot Mobile Menu Icons Using HTML5 and CSS3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Vertical Dot Mobile Menu Icons Using HTML5 and CSS3, how to create 3 vertical dots icons for mobile app menu, menu icon three vertical dots, Vertical Dot Mobile Menu Icons for phonegap, Vertical Dot Mobile Menu Icons for jquery mobile">
	<meta name="keywords" content="Vertical Dot Mobile Menu Icons Using HTML5 and CSS3, how to create 3 vertical dots icons for mobile app menu, menu icon three vertical dots, Vertical Dot Mobile Menu Icons for phonegap, Vertical Dot Mobile Menu Icons for jquery mobile">
	<style>
		*{margin: 0;padding:0px}
		.header{width: 100%; background-color: #0d77b6 !important; height: 60px;}
		.showLeft{  
			background-color: #0d77b6 !important;
			border:1px solid #0d77b6 !important;
			text-shadow: none !important;
			color:#fff !important;
			padding:10px;
		}
		.icons li {
		    background: none repeat scroll 0 0 #fff;
		    height: 7px;
		    width: 7px;
		    line-height: 0;
		    list-style: none outside none;
		    margin-right: 15px;
		    margin-top: 3px;
		    vertical-align: top;
		}	

		.btn-left {
		    left: 0.4em;
		}
		.btn-right {
		    right: 0.4em;
		}

		.btn-left, .btn-right {
		    position: absolute;
		    top: 0.24em;
		}
		.linker{
			text-decoration: none;
			color: #fff;
			background-color: #0d77b6 !important;
			padding: 15px;
			font-size: 20px;
			margin: 200px auto;
			display: block;
			width: 200px;
		}
	</style>
</head>

<body>

<div class="header">
	<ul class="icons btn-left showLeft">
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>

	<ul class="icons btn-right showLeft">
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>
</div>

<a href="round.html" class='linker'>Next...</a>

</body>
</html>

Here is the full HTML and CSS for Vertical Circle/Rounded Dot Mobile App Menu Icons Using HTML5 and CSS3.

<!DOCTYPE html> 
<html>
<head>
	<title>Vertical Dot Mobile Menu Icons Using HTML5 and CSS3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Vertical Dot Mobile Menu Icons Using HTML5 and CSS3, how to create 3 vertical dots icons for mobile app menu, menu icon three vertical dots, Vertical Dot Mobile Menu Icons for phonegap, Vertical Dot Mobile Menu Icons for jquery mobile">
	<meta name="keywords" content="Vertical Dot Mobile Menu Icons Using HTML5 and CSS3, how to create 3 vertical dots icons for mobile app menu, menu icon three vertical dots, Vertical Dot Mobile Menu Icons for phonegap, Vertical Dot Mobile Menu Icons for jquery mobile">
	<style>
		*{margin: 0;padding:0px}
		.header{width: 100%; background-color: #0d77b6 !important; height: 60px;}
		.showLeft{  
			background-color: #0d77b6 !important;
			border:1px solid #0d77b6 !important;
			text-shadow: none !important;
			color:#fff !important;
			padding:10px;
		}
		.icons li {
		    background: none repeat scroll 0 0 #fff;
		    height: 7px;
		    width: 7px;
		    line-height: 0;
		    list-style: none outside none;
		    margin-right: 15px;
		    margin-top: 3px;
		    vertical-align: top;
		    border-radius:50%;
		}	

		.btn-left {
		    left: 0.4em;
		}
		.btn-right {
		    right: 0.4em;
		}

		.btn-left, .btn-right {
		    position: absolute;
		    top: 0.24em;
		}
		.linker{
			text-decoration: none;
			color: #fff;
			background-color: #0d77b6 !important;
			padding: 15px;
			font-size: 20px;
			margin: 200px auto;
			display: block;
			width: 200px;
		}
	</style>
</head>

<body>

<div class="header">
	<ul class="icons btn-left showLeft">
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>

	<ul class="icons btn-right showLeft">
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>
</div>
<a href="index.html" class='linker'>Previous...</a>

</body>
</html>

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Access Now Instantly

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!

no thanks