Toggle Menu Jquery

 HTML

<div class="right-menu" id="right-menu">
        <div class="right-basicmenu">
            <a href="javascript:void(0);">Adventure Tours</a>
            <div class="right-submenu">
                <ul class="style">
                    <li><a href="javascript:void(0)">*Fishing</a></li>
                    <li><a href="javascript:void(0)" class="submenusel">*Mountaineerig</a></li>
                    <li><a href="javascript:void(0)">*Walking</a></li>
                    <li><a href="javascript:void(0)">*Horse riding</a></li>
                    <li><a href="javascript:void(0)">*Camel riding</a></li>
                    <li><a href="javascript:void(0)">*Biking</a></li>
                    <li><a href="javascript:void(0)">*Film making</a></li>
                    <li><a href="javascript:void(0)">*Jeep sarari</a></li>
                </ul>
            </div>
        </div>

        <div class="right-basicmenu">
            <a href="javascript:void(0);">Culture Tours</a>
            <div class="right-submenu">
                <ul class="style">
                    <li><a href="javascript:void(0)">*Fishing</a></li>
                    <li><a href="javascript:void(0)">*Mountaineerig</a></li>
                </ul>
            </div>
        </div>
    </div>

Javascript

<script type="text/javascript">
        function clickon(){   
            var $p = $(this).parent();
            var iam = false;
            $('#right-menu .right-basicmenu').filter(function(){
                return $(this).data("clicked");
            }).each(function () {   
                if ($(this).data("clicked")) {
                    $(this).data("clicked",false);
                    $($(this).children().get(1)).slideUp("slow");
                    iam = $(this).data("index")==$p.data("index");
                }
            });
            if (!iam) {
                $p.data("clicked",!$p.data("clicked"));
                if($p.data("clicked"))
                    $(this).next().slideDown("slow");
                else
                    $(this).next().slideUp("slow");
            }
        }       
        $('#right-menu .right-basicmenu').each(function(i){
            $(this).data("clicked",false);
            $(this).data("index",i);
            var $a = $($(this).children().get(0));           
            $a.click(clickon);
            $a.next().slideUp("fast");
        });           
    </script>

Нямка Photoshop cs5

Мэдэхгүй зүйлээ мэдээж надаас гэхдээ Photoshop дээр

IE6-ийн css-ийн асуудал

уусалттай зургаар хийсэн background-тай  үед background-ийг нь доорх байдлаар тавьсан

background-repeat:no-repeat; background-image:url("assets/bg.png"); *background-image:none; *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://localhost:8080/chart/static/style/interface/chart/default/assets/bg.png", sizingMethod='scale');

Асуудлууд:

1. Ингэж тавьсан тохиолдолд IE6 дээр ийм background-тай tag-ууд доторх ямар ч <a> tag-ууд ажиллахгүй байна.
2. Ингэж тавихгүй болохоор IE6 дээр уусалттай зураг бүхий background-аа авч чадахгүй байна.

Шийдэл ????

Шийдэл1:

Үүнийг шийдэх энгийн бөгөөд бага зэрэг болхи арга нь дан ганц html болон css-ээр нь шийдэх.  Үүнийг хийхэд html нь дараах байдалтай байна.

<div class="bg-contr"></div>
<div class="content-contr">
    <a href="javascript:void(0)">Энд контентууд нь байна.</a></div>

харин css нь

.bg-contr{position:relative; background-repeat:no-repeat; background-image:url("assets/bg.png"); *background-image:none; *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://localhost:8080/project/static/style/interface/site/default/assets/bg.png", sizingMethod='scale');}

.content-contr{position:absolute; top:0; left:0;}

Ингэснээр background-ийг агуулж байгаа таг болон тэр дотор харагдах контентыг агуулж байгаа тагууд нь хоорондоо хамааралгүй болж нэгийг нь нөгөө дээр нь давхарлаж тавьсан байдлаар харагдуулах боломжтой болж байна.