Popup Menu in Windows Store App Using JQuery

Article

Introduction

Today we are going to implement a popup menu in a Metro Style Application using jQuery. First of all we will include the jQuery library in our application to use its function. The menu will be shown by a Popup on the mouse enter event. In the HTML section of the application we will use a <ul> tag to implement the title of the menu.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

Open Visual Studio 2012
File -> New -> Project
Choose Template -> JavaScript -> Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following are the contents of the project:

JavaScript Code
Style Sheet Code

Code :

$(function () {

$('.dd').mouseenter(function () {

$('.s_links').stop(false, true).hide();

var chmenu = $(this).parent().next();

chmenu.css({

position: 'absolute',

top: $(this).offset().top + $(this).height() + 'px',

left: $(this).offset().left + 'px',

zIndex: 1000

});

chmenu.stop().slideDown(500);

chmenu.mouseleave(function () {

$(this).slideUp(500);

});

</script>

Code :

{

list-style:none;

padding:0px;

margin:0px

}

ul li

{

display:inline;

float:left;

}

ul li a

{

color:#ffffff;

background:#990E00;

margin-right:5px;

font-weight:bold;

font-size:20px;

font-family:Comic Sans MS;

text-decoration:none;

display:block;

width:210px;

height:25px;

line-height:25px;

text-align:center;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border: 1px solid #560E00;

}

ul li a:hover

{

color:#cccccc;

background:#0026ff;

font-weight:bold;

text-decoration:none;

display:block;

width:210px;

text-align:center;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border: 1px solid #000000;

}

ul li.s_links a

{

color: #000000;

background: #ccff66;

border-bottom: 1px solid #cccccc;

font-weight: 100;

text-decoration: none;

display: block;

width: 210px;

text-align: center;

margin-top: 2px;

}

ul li.s_links a:hover

{

color:#000000;

background:#ccff66;

font-weight:100;

text-decoration:none;

display:block;

width:200px;

text-align:center;

}

ul li.s_links

{

display:none;

}

#container

{

margin:0px auto;

width:800px;

}

.clear

{

clear:both;

}

.left

{

float:left;

}

.right

{

float:right;

}

</style>

Step 4 : The complete code of this application is written below. It contains the code of the HTML file and the JavaScript file code.

Code :

<!DOCTYPE html>

<html>

<head>

$(function () {

$('.dd').mouseenter(function () {

$('.s_links').stop(false, true).hide();

var chmenu = $(this).parent().next();

chmenu.css({

position: 'absolute',

top: $(this).offset().top + $(this).height() + 'px',

left: $(this).offset().left + 'px',

zIndex: 1000

});

chmenu.stop().slideDown(500);

chmenu.mouseleave(function () {

$(this).slideUp(500);

});

</script>

{

list-style:none;

padding:0px;

margin:0px

}

ul li

{

display:inline;

float:left;

}

ul li a

{

color:#ffffff;

background:#990E00;

margin-right:5px;

font-weight:bold;

font-size:20px;

font-family:Comic Sans MS;

text-decoration:none;

display:block;

width:210px;

height:25px;

line-height:25px;

text-align:center;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border: 1px solid #560E00;

}

ul li a:hover

{

color:#cccccc;

background:#0026ff;

font-weight:bold;

text-decoration:none;

display:block;

width:210px;

text-align:center;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border: 1px solid #000000;

}

ul li.s_links a

{

color: #000000;

background: #ccff66;

border-bottom: 1px solid #cccccc;

font-weight: 100;

text-decoration: none;

display: block;

width: 210px;

text-align: center;

margin-top: 2px;

}

ul li.s_links a:hover

{

color:#000000;

background:#ccff66;

font-weight:100;

text-decoration:none;

display:block;

width:200px;

text-align:center;

}

ul li.s_links

{

display:none;

}

#container

{

margin:0px auto;

width:800px;

}

.clear

{

clear:both;

}

.left

{

float:left;

}

.right

{

float:right;

}

</style>

</head>

<ul>

<a href="default5.aspx">About Us</a>

<a href="default6.aspx">Testomonial</a>

<a href="default6.aspx">History</a>

</li>

</ul>

<ul>

<li><a href="#" class="dd">Services</a></li>

<a href="default7.aspx">Web Applications</a>

<a href="default8.aspx">Windows Applications</a>

<a href="default9.aspx">Metro Style</a>

<a href="$">Windows Phone</a>

<a href="$">iPhone</a>

</li>

</ul>

<ul>

<li><a href="#" class="dd">Professionals</a></li>

<a href="default.aspx">Mobile Application</a>

<a href="default4.aspx">.Net Courses</a>

<a href="default2.aspx">Android Application</a>

<a href="default3.aspx">iphone Development</a>

<a href="#">Cloud Computing</a>

</li>

</ul>

</div>

<br/>

</body>

</html>

Step 5 : After running this code the output looks like this:

Enter the Mouse on Home title.

Enter the Mouse on Professionals title.

Up Next

Ebook Download

View all

Universal Windows Platform - Complete Solution

Read by 2.3k people

Download Now!

Learn

View all