==================ravi=================
script.cs
==========
$(function() {
var st = $('<style type="text/css" />');
st.text("#main_nav.make_menu_room { margin-bottom: " + $('#main_menu').height() + "px; } ");
$('head').append(st);
//set no_auto behavior on top nav
$('#top_nav .menuItem.dropdown.no_auto > a').click(function() {
$(this).parents('.menu').children('.menuItem .menu').hide();
$(this).siblings('.menu').toggle();
});
$('#search').click(function() {
if ($('#main_menu').css('display') != 'none') {
toggleMenu($('#main_menu'));
}
toggleSearch();
});
$('#menu, #close_main_menu').click(function() {
toggleMenu();
});
function toggleMenu() {
$('#main_menu').toggle(50);
$('#main_nav').toggleClass('make_menu_room');
$('#menu_button').toggleClass('active');
}
function toggleSearch() {
$('#main_nav').toggleClass('make_room');
}
});
====================.css==================
body, body * {
margin: 0; padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,arial;
-webkit-text-size-adjust: none;
}
a {
text-decoration: none;
}
a img{ border:0;}
fieldset {
border: 0;
}
.center {
text-align: center;
}
#wrapper {
margin: 0 auto;
}
#menu_button.active > a {
box-shadow: inset 2px 4px 20px #230e30;
}
#main_nav.menu.l1 {
background: url(../images/mainMenu_Bg.png) left top repeat-x;
height: 45px;
box-shadow: 0px 3px 10px #D1D1D1;
display: inline;
width: 100%;
}
#main_nav.menu.l1 > li {
line-height: 45px;
/*
background: url(../images/menuDivider.jpg) right top repeat-y;
*/
border-right: 1px solid #230e30;
box-shadow: 1px 0 0 #653c7f;
left: 10px;
display: inline-block;
}
#main_nav.menu.l1 > li.dropdown {
/*
background: url(../images/menuDivider.jpg) right top repeat-y,
url(../images/dropdown.png) right center no-repeat;
*/
background: url(../images/dropdown.png) right center no-repeat;
}
#main_nav.menu.l1 > li.dropdown a {
/*
padding-right: 24px;
*/
}
#main_nav.menu.l1 > li.dropdown.active {
background-color: #3a015d;
}
#main_nav.menu.l1 #home {
display: none;
/*
text-indent: -9999px;
display: inline-block;
width: 20px;
height: 100%;
background: url(../images/home_Icon.png) center center no-repeat;
*/
}
#main_nav.menu.l1 #xsearch_icon {
display: none;
/*
text-indent: -9999px;
display: inline-block;
height: 100%;
width: 29px;
background: url(../images/search_menu_item.png) center center no-repeat;
*/
}
#main_nav.menu.l1 #search_button.active #search_icon {
visibility: hidden;
}
#main_nav.make_room {
margin-bottom: 46px;
}
#main_nav {
border-top: 1px solid #230e30;
border-bottom: 1px solid #230e30;
}
#main_nav .menuItem a {
font-weight: 600;
}
#main_nav .menuItem.active {
background-color: #3a015d;
box-shadow: inset 0px 4px 10px #330033;
}
#main_nav .menu.l2 .menuItem a {
padding-left: 10px;
}
#main_menu {
width: 100%;
background: #542671;
top: 46px;
border-left: 1px solid #3a194f;
border-right: 1px solid #3a194f;
}
#main_menu .menuItem {
width: 100%;
border: 1px solid #3a194f;
background: url(../images/fm_arrow_down.jpg) right center no-repeat;
}
#main_menu .menuItem.last {
background: #4a2263;
}
#main_menu .menuItem.m1 {
background: url(../images/fm_arrow.jpg) right center no-repeat;
}
#main_menu .menuItem.last a {
background: url(../images/arrow_up.png) center center no-repeat !important;
}
/* menu */
.menu {
list-style: none;
}
.menu .menu {
display: none;
}
.menuItem.dropdown:hover > .menu,
.l1 > .menuItem.dropdown.active > .menu{
display: block;
}
.menuItem.dropdown.no_auto:hover > .menu {
display: none;
}
.#mainMennu .menu.l1 > .menuItem.dropdown:hover > .menu {
display: none;
}
.menu.l1 .menuItem {
display: block;
float: left;
}
.menu.l2 .menuItem {
}
.menuItem .pointer {
display: none;
}
.menuItem:hover > a .pointer, .l1 > .menuItem.active > a .pointer {
display: block;
}
.menu.l1, .menu.l2, .menu.l3 {
float: left;
}
.menu.l1 {
position: relative;
width: 100%;
}
.menu.l2 {
position: absolute;
left: 0;
}
.menu.l3 {
position: absolute;
z-index: 100;
left: 0;
}
.menu.l1 > li > a, .menu.l2 > li > a {
color: #fff;
/*
padding: 0 10px;
*/
==============================.aspx=================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Nagrajusir_Menu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>STC Mall</title>
<link href="indexhtml/style.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script src="scripts/arabicscript.js" type="text/javascript"></script>
<!-- slide script -->
</head>
<body>
<div id="header">
<ul id="main_nav" class="nav menu l1">
<li id="menu_button" class="menuItem dropdown no_auto" style="width: 39.5%">
<a href="#" id="menu"> <img src="images/menu_menuitem.png" alt="Menu" style="max-width: 15%;" /> Menu</a>
<ul class="menu l2" id="main_menu">
<li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?Siteid=66&LinkId=0">Deeni Yaqini</a></li>
<li class="menuItem m1"><a href="http://www.m3com.com.sa/en/news">News</a></li>
<li class="menuItem m1"><a href="sports.html">Sports</a></li>
<li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?SITEID=353&LINKID=47049">Women</a></li>
<li class="menuItem m1"><a href="http://www.m3com.com.sa/en/tube/invision">Invision</a></li>
<li class="menuItem m1"><a href="http://stcgames.com">Games</a></li>
<li class="menuItem m1"><a href="#">Kids</a></li>
<li class="menuItem m1"><a href="#">STC Services</a></li>
<li class="menuItem m1"><a href="http://stcappshop.com">App Shop</a></li>
<li class="menuItem m1"><a href="http://forum.m3com.com.sa/">Forums</a></li>
<li class="menuItem m1 last"><a href="#" id="close_main_menu"> </a></li>
</ul>
</li>
</ul> <!-- /#main_nav -->
</div> <!-- /#header -->
<img src="images/news/arab_news_item.jpg" width="100%" />
</body>
</html>
script.cs
==========
$(function() {
var st = $('<style type="text/css" />');
st.text("#main_nav.make_menu_room { margin-bottom: " + $('#main_menu').height() + "px; } ");
$('head').append(st);
//set no_auto behavior on top nav
$('#top_nav .menuItem.dropdown.no_auto > a').click(function() {
$(this).parents('.menu').children('.menuItem .menu').hide();
$(this).siblings('.menu').toggle();
});
$('#search').click(function() {
if ($('#main_menu').css('display') != 'none') {
toggleMenu($('#main_menu'));
}
toggleSearch();
});
$('#menu, #close_main_menu').click(function() {
toggleMenu();
});
function toggleMenu() {
$('#main_menu').toggle(50);
$('#main_nav').toggleClass('make_menu_room');
$('#menu_button').toggleClass('active');
}
function toggleSearch() {
$('#main_nav').toggleClass('make_room');
}
});
====================.css==================
body, body * {
margin: 0; padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,arial;
-webkit-text-size-adjust: none;
}
a {
text-decoration: none;
}
a img{ border:0;}
fieldset {
border: 0;
}
.center {
text-align: center;
}
#wrapper {
margin: 0 auto;
}
#menu_button.active > a {
box-shadow: inset 2px 4px 20px #230e30;
}
#main_nav.menu.l1 {
background: url(../images/mainMenu_Bg.png) left top repeat-x;
height: 45px;
box-shadow: 0px 3px 10px #D1D1D1;
display: inline;
width: 100%;
}
#main_nav.menu.l1 > li {
line-height: 45px;
/*
background: url(../images/menuDivider.jpg) right top repeat-y;
*/
border-right: 1px solid #230e30;
box-shadow: 1px 0 0 #653c7f;
left: 10px;
display: inline-block;
}
#main_nav.menu.l1 > li.dropdown {
/*
background: url(../images/menuDivider.jpg) right top repeat-y,
url(../images/dropdown.png) right center no-repeat;
*/
background: url(../images/dropdown.png) right center no-repeat;
}
#main_nav.menu.l1 > li.dropdown a {
/*
padding-right: 24px;
*/
}
#main_nav.menu.l1 > li.dropdown.active {
background-color: #3a015d;
}
#main_nav.menu.l1 #home {
display: none;
/*
text-indent: -9999px;
display: inline-block;
width: 20px;
height: 100%;
background: url(../images/home_Icon.png) center center no-repeat;
*/
}
#main_nav.menu.l1 #xsearch_icon {
display: none;
/*
text-indent: -9999px;
display: inline-block;
height: 100%;
width: 29px;
background: url(../images/search_menu_item.png) center center no-repeat;
*/
}
#main_nav.menu.l1 #search_button.active #search_icon {
visibility: hidden;
}
#main_nav.make_room {
margin-bottom: 46px;
}
#main_nav {
border-top: 1px solid #230e30;
border-bottom: 1px solid #230e30;
}
#main_nav .menuItem a {
font-weight: 600;
}
#main_nav .menuItem.active {
background-color: #3a015d;
box-shadow: inset 0px 4px 10px #330033;
}
#main_nav .menu.l2 .menuItem a {
padding-left: 10px;
}
#main_menu {
width: 100%;
background: #542671;
top: 46px;
border-left: 1px solid #3a194f;
border-right: 1px solid #3a194f;
}
#main_menu .menuItem {
width: 100%;
border: 1px solid #3a194f;
background: url(../images/fm_arrow_down.jpg) right center no-repeat;
}
#main_menu .menuItem.last {
background: #4a2263;
}
#main_menu .menuItem.m1 {
background: url(../images/fm_arrow.jpg) right center no-repeat;
}
#main_menu .menuItem.last a {
background: url(../images/arrow_up.png) center center no-repeat !important;
}
/* menu */
.menu {
list-style: none;
}
.menu .menu {
display: none;
}
.menuItem.dropdown:hover > .menu,
.l1 > .menuItem.dropdown.active > .menu{
display: block;
}
.menuItem.dropdown.no_auto:hover > .menu {
display: none;
}
.#mainMennu .menu.l1 > .menuItem.dropdown:hover > .menu {
display: none;
}
.menu.l1 .menuItem {
display: block;
float: left;
}
.menu.l2 .menuItem {
}
.menuItem .pointer {
display: none;
}
.menuItem:hover > a .pointer, .l1 > .menuItem.active > a .pointer {
display: block;
}
.menu.l1, .menu.l2, .menu.l3 {
float: left;
}
.menu.l1 {
position: relative;
width: 100%;
}
.menu.l2 {
position: absolute;
left: 0;
}
.menu.l3 {
position: absolute;
z-index: 100;
left: 0;
}
.menu.l1 > li > a, .menu.l2 > li > a {
color: #fff;
/*
padding: 0 10px;
*/
==============================.aspx=================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Nagrajusir_Menu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>STC Mall</title>
<link href="indexhtml/style.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script src="scripts/arabicscript.js" type="text/javascript"></script>
<!-- slide script -->
</head>
<body>
<div id="header">
<ul id="main_nav" class="nav menu l1">
<li id="menu_button" class="menuItem dropdown no_auto" style="width: 39.5%">
<a href="#" id="menu"> <img src="images/menu_menuitem.png" alt="Menu" style="max-width: 15%;" /> Menu</a>
<ul class="menu l2" id="main_menu">
<li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?Siteid=66&LinkId=0">Deeni Yaqini</a></li>
<li class="menuItem m1"><a href="http://www.m3com.com.sa/en/news">News</a></li>
<li class="menuItem m1"><a href="sports.html">Sports</a></li>
<li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?SITEID=353&LINKID=47049">Women</a></li>
<li class="menuItem m1"><a href="http://www.m3com.com.sa/en/tube/invision">Invision</a></li>
<li class="menuItem m1"><a href="http://stcgames.com">Games</a></li>
<li class="menuItem m1"><a href="#">Kids</a></li>
<li class="menuItem m1"><a href="#">STC Services</a></li>
<li class="menuItem m1"><a href="http://stcappshop.com">App Shop</a></li>
<li class="menuItem m1"><a href="http://forum.m3com.com.sa/">Forums</a></li>
<li class="menuItem m1 last"><a href="#" id="close_main_menu"> </a></li>
</ul>
</li>
</ul> <!-- /#main_nav -->
</div> <!-- /#header -->
<img src="images/news/arab_news_item.jpg" width="100%" />
</body>
</html>
