Vertical Dot Mobile App Menu Icons Using HTML5 and CSS3

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.

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>

 .