Click here to Skip to main content
15,887,998 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: Christ the redeemer Pin
toms9803321-Mar-14 1:41
toms9803321-Mar-14 1:41 
QuestionASP.Net MVC 4 Web API Param is Null Pin
Kevin Marois6-Mar-14 14:59
professionalKevin Marois6-Mar-14 14:59 
QuestionPHP Pin
zunisheikh4-Mar-14 20:18
zunisheikh4-Mar-14 20:18 
SuggestionRe: PHP Pin
thatraja4-Mar-14 21:07
professionalthatraja4-Mar-14 21:07 
GeneralRe: PHP Pin
zunisheikh4-Mar-14 23:06
zunisheikh4-Mar-14 23:06 
GeneralRe: PHP Pin
thatraja4-Mar-14 23:19
professionalthatraja4-Mar-14 23:19 
AnswerRe: PHP Pin
Kornfeld Eliyahu Peter4-Mar-14 21:28
professionalKornfeld Eliyahu Peter4-Mar-14 21:28 
QuestionControling Menus using Java Script Pin
harishm5913-Mar-14 21:12
harishm5913-Mar-14 21:12 
How to control the menus using jscript or jquery ?
Am new to this web development domain.

this is my index.html file which contains menu contents

XML
<html>
<head>
<!-- Menus Style Sheet -->
        <link rel="stylesheet" type="text/css" href="menus.css" />
    <!-- End Menus Style Sheet -->
</head>
<body>
<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="" class="pattern">Kitchen</a>
            <div class="subs">
                    <dl class="even">
                        <dt>STORAGE</dt>
                        <dd><a href="">Airtight Storage</a></dd>
                        <dd><a href="">Lock Storage</a></dd>
                        <dd><a href="">Microwavable Storage</a></dd>
                        <dd><a href="">Canisters & Jars</a></dd>

                        <dt>COOKWARE</dt>
                        <dd><a href="">Cookware Sets</a></dd>
                        <dd><a href="">Pressure Cookers</a></dd>
                        <dd><a href="">Frying Pans & Woks</a></dd>
                        <dd><a href="">Pots & Sauce Pans</a></dd>
                    </dl>
                    <dl class="odd">
                        <dt>SERVEWARE</dt>
                        <dd><a href="">Dishes & Bowls</a></dd>
                        <dd><a href="">Casseroles</a></dd>
                        <dd><a href="">Cutlery</a></dd>
                        <dd><a href="">Plates, Trays & Platters</a></dd>
                    </dl>
                    <dl class="even">
                        <dt>GLASS SETS</dt>
                        <dd><a href="">Everyday Glasses</a></dd>
                        <dd><a href="">Bar Glasses</a></dd>
                        <dd><a href="">Tumblers</a></dd>
                        <dd><a href="">Bone China</a></dd>
                        <dd><a href="">Melamine</a></dd>
                        <dd><a href="">Stainless Steel</a></dd>
                    </dl>
                    <dl class="odd">
                    </dl>
                    <dl class="even">
                    </dl>
                    <dl class="odd">
                    </dl>
                    <dl class="even-last">
                    <dt>GLASS SETS</dt>
                    </dl>



            </div>
            </li>
            <li><a href="" class="pattern">Office Furniture</a>
                <div class="subs">
                   <dl class="even">
                        <dt>CHAIRS</dt>
                        <dd><a href="">Ergonomic Chairs</a></dd>
                        <dd><a href="">Executive Chairs</a></dd>
                        <dd><a href="">Folding Chairs</a></dd>
                    </dl>
                    <dl class="odd">
                        <dt>DESKS</dt>
                        <dd><a href="">Workstations</a></dd>
                        <dd><a href="">Executive Tables</a></dd>
                        <dd><a href="">Computer Tables</a></dd>
                        <dd><a href="">Study & Laptop Tables</a></dd>
                        <dd><a href="">Conference Tables</a></dd>
                    </dl>
                   <dl class="even">
                       <dt> RECEPTION SEATING</dt>
                        <dd><a href="">Sofas</a></dd>
                        <dd><a href="">Ottomans</a></dd>
                        <dd><a href="">Visitor Chairs</a></dd>
                    </dl>
                     <dl class="odd">
                    </dl>
                    <dl class="even">
                    </dl>
                    <dl class="odd">
                    </dl>
                    <dl class="even-last">
                    <dt></dt>
                    </dl>

                </div>
            </li>
            <li><a href="" class="pattern">Furnishings</a>
                 <div class="subs">
                   <dl class="even">
                        <dt>BED SHEETS</dt>
                        <dd><a href="">Double Bed</a></dd>
                        <dd><a href="">Single Bed</a></dd>
                        <dd><a href="">Combo Offers</a></dd>
                         <dd><a href="">Kids Bed Sheets</a></dd>
                    </dl>

                   <dl class="odd">
                        <dt>CURTAINS</dt>
                        <dd><a href="">Door Curtains</a></dd>
                        <dd><a href="">Window Curtains</a></dd>
                        <dd><a href="">Shower Curtains</a></dd>
                        <dd><a href="">Kids Curtains</a></dd>
                    </dl>
                 <dl class="even">
                        <dt>RUGS & CARPETS</dt>
                        <dd><a href="">Area Rugs</a></dd>
                        <dd><a href="">Carpets</a></dd>
                        <dd><a href="">Dhurries & Runners</a></dd>
                    </dl>

                     <dl class="odd">
                     <dt><a href=""><img src="images/decor_hover_image.jpg" height="100" width="130" /></a> </dt>
                    </dl>
                    <dl class="even">
                    </dl>
                    <dl class="odd">
                    </dl>
                    <dl class="even-last">
                    <dt></dt>
                    </dl>

                </div>
            </li>

            <li><a href="" class="pattern">Home Furniture</a>
             <div class="subs">
                   <dl class="even">
                        <dt>BED SHEETS</dt>
                        <dd><a href="">Double Bed</a></dd>
                        <dd><a href="">Single Bed</a></dd>
                        <dd><a href="">Combo Offers</a></dd>
                         <dd><a href="">Kids Bed Sheets</a></dd>
                    </dl>

                   <dl class="odd">
                        <dt>CURTAINS</dt>
                        <dd><a href="">Door Curtains</a></dd>
                        <dd><a href="">Window Curtains</a></dd>
                        <dd><a href="">Shower Curtains</a></dd>
                        <dd><a href="">Kids Curtains</a></dd>
                    </dl>
                 <dl class="even">
                        <dt>RUGS & CARPETS</dt>
                        <dd><a href="">Area Rugs</a></dd>
                        <dd><a href="">Carpets</a></dd>
                        <dd><a href="">Dhurries & Runners</a></dd>
                    </dl>

                     <dl class="odd">
                     <dt><a href=""><img src="images/decor_hover_image.jpg" height="100" width="130" /></a> </dt>
                    </dl>
                    <dl class="even">
                    </dl>
                    <dl class="odd menuadvertise-twocol">
                    <dt><a href=""><img src="images/menu-advertise/1.jpg" height="200" width="253" /></a> </dt>
                    </dl>
                   <!-- <dl class="even-last">
                    <dt></dt>
                    </dl>-->

                </div>

            </li>

            <li><a href="" class="pattern">Decor</a>
            <div class="subs">
                   <dl class="even">
                    </dl>

                   <dl class="odd  menuadvertise-twocol">
                       <dt><a href=""><img src="images/menu-advertise/1.jpg" height="200" width="253" /></a> </dt>

                    </dl>
                 <dl class="even">
                        <dt>RUGS & CARPETS</dt>
                        <dd><a href="">Area Rugs</a></dd>
                        <dd><a href="">Carpets</a></dd>
                        <dd><a href="">Dhurries & Runners</a></dd>
                    </dl>

                     <dl class="odd">
                     <dt><a href=""><img src="images/decor_hover_image.jpg" height="100" width="130" /></a> </dt>
                    </dl>
                    <dl class="even">
                    <dt>BED SHEETS</dt>
                        <dd><a href="">Double Bed</a></dd>
                        <dd><a href="">Single Bed</a></dd>
                        <dd><a href="">Combo Offers</a></dd>
                         <dd><a href="">Kids Bed Sheets</a></dd>
                    </dl>
                    <dl class="odd">
                         <dt>CURTAINS</dt>
                        <dd><a href="">Door Curtains</a></dd>
                        <dd><a href="">Window Curtains</a></dd>
                        <dd><a href="">Shower Curtains</a></dd>
                        <dd><a href="">Kids Curtains</a></dd>
                    </dl>
                   <!-- <dl class="even-last">
                    <dt></dt>
                    </dl>-->

                </div>

            </li>
            <li><a href="" class="pattern">Appliances</a></li>
            <li><a href="" class="pattern">Pets</a></li>
            <li><a href="" class="pattern">Housekeeping</a></li>
             <li><a href="" class="pattern">Gourmet</a></li>
              <li><a href="" class="pattern">Bath</a></li>
              <li><a href="" class="pattern">Personal Care</a></li>


        </ul>

        <div class="hr-line" style="margin-top:30px;"></div>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
    <div style="clear:both"></div>
</div>

<!-- End of Menu Section -->


</body>
</html>



this is my menus.css file
CSS
@charset "utf-8";
/* CSS Document */

.example {
     position:absolute;
   /* background:#fff url(../images/background.jpg); */
    width:960px;;
    margin:0 auto;
   /* border:1px #b20 solid;*/
    /*margin:20px auto;*/
        border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
.menuholder {
    float:left;
    /*font:normal bold 11px/35px verdana, sans-serif;*/
    overflow:hidden;
    position:relative;
    width:100%;
    font-family: Arial;
    font-size:12px;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    background:#888;
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:7px;
    position:absolute;
    top:-9px;
    width:960px;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;

  /*  width:100%;*/
    background-color:#ffffff;




}
.menuholder:hover div.back
{
    height:220px;
    margin-top: -8px;

    border: 1px solid #E3E3E3;
    border-top: none;
    -moz-box-shadow: 0 2px 4px #252525;
    -webkit-box-shadow: 0 2px 4px #252525;
    box-shadow: 0 3px 2px 0 #252525;
    padding-left:5px;
}
ul.menu {
   display: block;
    float: left;
    list-style: none;
    margin: 0% 0% 0% -3%;
    width: 100%;
}
ul.menu li {
    float:left;
    margin:7px 27.2px 0 0;
}
ul.menu li > a {
    /*-moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.2s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.2s ease-in-out;*/
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    /*-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);*/
    -webkit-transition: all 0.2s ease-in-out;
    border-radius: 0 0 10px 10px;
    /*box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9)*/;
    /*color: #0839A3;*/
    display: table-row;
    padding: 0 10px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    color: #1D4D7D;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}
ul.menu li a.pattern {
    /*background:#572C15;*/
}

ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#00a;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
    margin-top: -1px;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:10px 0 0% 0%;  /* Sub Menus height */
    width:0;
}



.menu dt {
     color: #000;
    font-family: arial, sans-serif;
    /*font-size: 12px;
    font-weight: 700;
    height: 12px;*/
    line-height: 15px;
    margin: 0;
    padding: 7px 0 0px 5px;
    white-space: nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    line-height:5px;
    width: 135px;
    margin-left: 6px;
    /*border: 1px solid;*/
}
.menu dd a {
    background:transparent;
    color:#9DA1AB;
    font-size:12px;
    /*height:20px;*/
    line-height:18px;
    padding: 0 0 0 4px;
    text-align:left;
    white-space:nowrap;
    width:80px;
    text-decoration: none;
    font-family: Arial;
    font-weight: normal;
}
.menu dd a:hover {
    color:#090A0A;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin:11px 0px 1px 3px;
    padding:0px 0px 0px 0px;
    width:133.7px;
    height:215px;
    /*border:1px solid;*/
}

.menu li:hover div.subs dl.menuadvertise-twocol
{
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin:17px 0px 1px 3px;
    padding:0px 0px 0px 0px;
    height:215px;
    /*border:1px solid;*/
    width:265px;
}

.even
{
     background-color:#FAFBFC;
    /*background-color:#FFFCFD;*/
}
.even-last
{
     background-color:#FAFBFC;
     width:148px;
    /*background-color:#FFFCFD;*/
}
.odd
{
     background-color:white;
    /*background-color:#FFFCFD;*/
}
ul.menu li:hover > a,ul.menu li > a:hover {
    /*background:#aaa;
    color:#fff;
    padding:10px 10px 0;*/
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
ul.menu li a.pattern:hover,ul.menu li:hover a.pattern {
/*background:#5D2F16;*/
text-decoration:underline;
}

.menu li:hover div.subs,.menu li a:hover div.subs {
    width: 957px;
    /*border: 1px solid;*/

}




In above menus style, i have to control number of sub-categories adding in category.The height of the sub menus is fixed, so that if sub categories is more it sholud move to next column.

For above problem i need jscript. please any one can hepl me D'Oh! | :doh: D'Oh! | :doh:

Harish
QuestionWeb programming, again. Pin
FeedScrn2-Mar-14 14:08
FeedScrn2-Mar-14 14:08 
AnswerRe: Web programming, again. Pin
David Mujica3-Mar-14 4:00
David Mujica3-Mar-14 4:00 
GeneralRe: Web programming, again. Pin
FeedScrn3-Mar-14 4:42
FeedScrn3-Mar-14 4:42 
QuestionPHP Pin
zunisheikh2-Mar-14 8:23
zunisheikh2-Mar-14 8:23 
AnswerRe: PHP Pin
thatraja2-Mar-14 20:18
professionalthatraja2-Mar-14 20:18 
QuestionPHP Pin
zunisheikh2-Mar-14 6:02
zunisheikh2-Mar-14 6:02 
AnswerRe: PHP Pin
thatraja2-Mar-14 20:22
professionalthatraja2-Mar-14 20:22 
QuestionPHP Pin
zunisheikh2-Mar-14 5:06
zunisheikh2-Mar-14 5:06 
AnswerRe: PHP Pin
Peter Leow2-Mar-14 5:28
professionalPeter Leow2-Mar-14 5:28 
AnswerRe: PHP Pin
thatraja2-Mar-14 20:27
professionalthatraja2-Mar-14 20:27 
GeneralRe: PHP Pin
stevic9-Apr-14 7:16
professionalstevic9-Apr-14 7:16 
GeneralRe: PHP Pin
thatraja9-Apr-14 7:22
professionalthatraja9-Apr-14 7:22 
Questionhow to use join query to merge order,customer,category and product table? Pin
zunisheikh2-Mar-14 5:04
zunisheikh2-Mar-14 5:04 
AnswerRe: how to use join query to merge order,customer,category and product table? Pin
Peter Leow2-Mar-14 5:36
professionalPeter Leow2-Mar-14 5:36 
GeneralRe: how to use join query to merge order,customer,category and product table? Pin
zunisheikh2-Mar-14 5:58
zunisheikh2-Mar-14 5:58 
Questionhow to use join query to merge order,customer,category and product table? Pin
zunisheikh2-Mar-14 4:57
zunisheikh2-Mar-14 4:57 
RantRe: how to use join query to merge order,customer,category and product table? Pin
thatraja2-Mar-14 20:12
professionalthatraja2-Mar-14 20:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.