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 :
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
$(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 :
<style type="text/css">
ul
{
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>
<meta charset="utf-8" />
<title>App4</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
$(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>
<style type="text/css">
ul
{
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>
<body style="background-color:#ffffff">
<div id="container" style="margin-top:40px;">
<ul>
<li><a href="#" class="dd">Home</a></li>
<li class="s_links">
<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>
<li class="s_links">
<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>
<li class="s_links">
<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.
Join the conversation! Your thoughts help the community grow.