Friday, March 16, 2012

பிளாக்கர் : சாதாரண Drop Down மெனுவை எளிதில் உருவாக்க





லைப்பதிவுகளுக்கோ அல்லது வலைப்பூக்களுக்கோ அல்லது இணைய தளங்களுக்கோ செல்லும் போது முதலில் அதன் மெனு பகுதிகள் இருக்கும் ..

அதில் அந்த வலைப்பூ அல்லது இணையதளத்தை பற்றிய மற்ற பக்கங்களின் இணைப்புகள் இருக்கும் .. சில மெனுபார்கள் பார்க்கும் போது மிக அழகான வடிவமைப்பில் இருக்கும் ... ஆனால் சில ஜாவா ஸ்கிரிப்ட் பயன்படுத்தி தான் அது போன்ற Drop Down மெனுக்களை நம்மால் உருவாக்க முடியும் .. இன்று நாம் எளிமையான மற்றும் சாதாரணமான மற்றும் அழகான மெனு பார்களை இரண்டே படிகளில் எளிதில் உருவாக்கி விடலாம் ....


மேலும் சிலவகை மெனு பார்கள் சில உலாவிகளில் தெளிவாக தெரியாது ..
அதாவது அதன் கட்டமைப்பு ஒழுங்காக தோன்றாது ..

இந்த மெனு பார்கள் எந்த உலாவிகளாய் இருந்தாலும் வேலை செய்யும்

#pcm{display:none;}
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 1px 1px 0px;
    background-color:#A5A5A5;
    background-repeat:repeat;
    border-color:#A6A6A6;
    border-width:0px;
    border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
    display:block;
    zoom:1;
    float: left;
}
ul.cssMenu ul{
    width:175.35px;
}
ul.cssMenu li{
    display:block;
    margin:1px 0px 0px 1px;
    font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#FFFFFF;
    border-width:0px;
    border-color:#FCEEB0;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:5px;
    _padding-left:0;
    font:14px Georgia;
    color: #000000;
    text-decoration:none;
    cursor:pointer;
}
ul.cssMenu span{
    overflow:hidden;
}
ul.cssMenu li {
    float:left;
}
ul.cssMenu ul li {
    float:none;
}
ul.cssMenu ul a {
    text-align:left;
    white-space:nowrap;
}
ul.cssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.cssMenu li.sep span{
    float:none;    padding-right:0;
    width:3;
    height:100%;
    display:inline-block;
    background-color:#A6A6A6;    background-image:none;}
ul.cssMenu ul li.sep span{
    width:100%;
    height:3;
}
ul.cssMenu li:hover{
    position:relative;
}
ul.cssMenu li:hover>a{
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:14px Georgia;
    color: #FFFFFF;
    text-decoration:none;
}
ul.cssMenu li a:hover{
    position:relative;
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:14px Georgia;
    color: #FFFFFF;
    text-decoration:none;
}
ul.cssMenu li.dis a {
    color: #AAAAAA !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
ul.cssMenu span{
    display:block;
    background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arrv_blue_2.gif);
    background-position:right center;
    background-repeat: no-repeat;
   padding-right:8px;}
ul.cssMenu li:hover>a>span{    background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arrv_white_2.gif);
}
ul.cssMenu a:hover span{    _background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arrv_white_2.gif)}
ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arr_blue_2.gif)}
ul.cssMenu ul li:hover > a span{    background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arr_white_2.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span,ul.cssMenu table a:hover a:hover a:hover span{background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arr_white_2.gif)}
ul.cssMenu table a:hover table span,ul.cssMenu table a:hover a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/clear-2/images/arr_blue_2.gif)}
ul.cssMenu li a.cssMenui0{
font:n;
}
ul.cssMenu li a.cssMenui0:hover{
font:o;
}


 மேலே உள்ள கோடிங்கை ]]></b:skin>  க்கு முன்னால் PASTE செய்து

விட்டு DESIGN -- ADD A PAGE ELEMET - ADD WIDJET -HTML & JAVA SCRIPT 

அங்கு பேஸ்ட் செய்யவும் ( கீழே உள்ள கோடிங்கை )

<ul class="cssMenu cssMenum">
    <li class=" cssMenui0"><a class="  cssMenui0" href="#">WESMOB</a></li>
    <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Product Info</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">What is New?</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Menu Features</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=" cssMenum">
            <li class=" cssMenui"><a class="  cssMenui" href="#">Free Online Generator</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">100% Pure CSS Menu</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">No Javascript Required</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">Multi Level Submenus</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">Search-Engine Friendly</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">Advanced Styling</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">Horizontal &amp; Vertical</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#"><span>How To Use</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=" cssMenum">
            <li class=" cssMenui"><a class="  cssMenui" href="#">1. Select Template</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">2. Customize Items</a></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#">3. Download Zip</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Supported Browsers</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=" cssMenum">
            <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Windows OS</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class=" cssMenum">
                <li class=" cssMenui"><a class="  cssMenui" href="#">Internet Explorer</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Firefox</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Chrome</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Safari</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Mozilla</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Opera</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Netscape Navigator</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#"><span>MAC OS</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class=" cssMenum">
                <li class=" cssMenui"><a class="  cssMenui" href="#">Firefox</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Safari</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Internet Explorer</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Unix/Linux OS</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class=" cssMenum">
                <li class=" cssMenui"><a class="  cssMenui" href="#">Firefox</a></li>
                <li class=" cssMenui"><a class="  cssMenui" href="#">Konqueror</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>Templates</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 1</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 2</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 3</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 4</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 5</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Template 6</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class=" cssMenui0"><a class="  cssMenui0" href="#">FAQ</a></li>
    <li class=" cssMenui0"><a class="  cssMenui0" href="#">Contact Us</a></li>
</ul>


தேவையான இடத்தில் அந்த விட்ஜெட்-ஐ இழுத்து விடவும் ..

DEMO-------DEMO---------DEMO


















சிவப்பு நிற மெனுக்கள் : இங்கே செல்லவும்

பச்சை நிற மெனுக்கள் : இங்கே செல்லவும்

உதா நிற மெனுக்கள் : இங்கே செல்லவும்

நன்றி சந்தேகம் இருந்தால் பின்னூட்டத்தில் கேட்கவும் ....

8 comments:

  1. லோகநாதன்March 16, 2012 at 6:21 PM

    ஓகே நன்றி

    ReplyDelete
  2. நன்றி சார் நல்ல முயற்சி வாழ்த்துக்கள்

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. நண்பா என்னுடைய பிளாக்கரில் சரியாய் வேலை செய்ய வில்லை Drop Down மெனு வரவில்லை http://asathalimelathaniyam.blogspot.com/

    ReplyDelete
  5. @ star melathaniyam என்னை தொடர்பு கொள்ளவும்

    ReplyDelete
  6. மெனுவில் உட்பிரிவுகள் வர என்ன செய்ய வேண்டும்

    ReplyDelete