ravi: Menu control

==================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>






        





    </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> 
            </div> 


        <img src="images/news/arab_news_item.jpg" width="100%" />

    </body>
</html>

ravi

Tuesday, July 31, 2012

Menu control

No comments:

Post a Comment