Vertical Dot Mobile App Menu Icons Using HTML5 and CSS3

muni

11 years ago

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

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 ;
			border:1px solid #0d77b6 ;
			text-shadow: none ;
			color:#fff ;
			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 ; height: 60px;}
		.showLeft{  
			background-color: #0d77b6 ;
			border:1px solid #0d77b6 ;
			text-shadow: none ;
			color:#fff ;
			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 ;
			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 ; height: 60px;}
		.showLeft{  
			background-color: #0d77b6 ;
			border:1px solid #0d77b6 ;
			text-shadow: none ;
			color:#fff ;
			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 ;
			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>