បង្កើតមីនុយធ្លាក់ (Drop Down Menu) សាមញ្ញរាងជ្រុងៗ - Mrr-SokThen

ប្លុក មីនុយធ្លាក់ បង្កើតមីនុយធ្លាក់ (Drop Down Menu) សាមញ្ញរាងជ្រុងៗ

បង្កើតមីនុយធ្លាក់ (Drop Down Menu) សាមញ្ញរាងជ្រុងៗ

SokThen 7:00:00 AM

ខ្ញុំសង្កេតឃើញមានប្លកខ្មែរច្រើនដែរហើយ ដែលបានដាក់មីនុយធ្លាក់ប្រភេទនេះ។ តែដោយឡែកខ្ញុំសរសេរអត្ថបទនេះដើម្បី បង្ហាញជូនដល់ប្លកដែលអ្នកមិនទាន់បានដាក់ ឬមិនទាន់បានដឹង។ ការដាក់មីនុយធ្លាក់ប្រភេទនេះវាមានរបៀបដាក់ដូចតែលើកមុនៗដែរទេ វាមិនពិបាកអ្វីឡើយ។ ទោះជាយ៉ាងណាក្តីក៏ខ្ញុំនៅតែសូមណែនាំពីរបៀបដាក់ដូចខាងក្រោមនេះ ក្រែងលមិនបានអានអាមុន។

៙ សូមមើលពីរបៀបដាក់មីនុយធ្លាក់ (Drop Down Menu) សាមញ្ញរាងជ្រុងៗ ៖
- កត់ត្រាចូល (Login) គណនី Blogger របស់លោកអ្នក។
- ចូលទៅ Layout >> Addd a Gadget (សូមមើលរូបខាងក្រោម)

- រមូល (Scroll) ចុះក្រោមរកមើល Gadget ឈ្មោះថា HTML/JavaScript (សូមមើលរូប)

- ចម្លងកូដខាងក្រោមដាក់នៅក្នុងនោះ ដោយមិនបាច់ដាក់ចំណងជើង។
- ពេលដាក់កូដរួចរាល់ហើយ សូមចុចឆ្នុចពាក្យថា " Save " >> ពេលចុច " Save " ហើយសូមចាប់ទាញវាទៅដាក់នៅផ្នែកខាងលើគេ ក្រោម Header។

កូដមីនុយធ្លាក់ (Drop Down Menu) សាមញ្ញរាងជ្រុងៗ

<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ######### Drop Down Menu Bu HelperBlogger.com ######### */
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>

៙ ចំណាំ >>> អ្នកត្រូវប្តូរនៅត្រង់ ៖

- នៅត្រង់សញ្ញាទ្រុងជ្រូក (#) សូមប្តូរទៅជាដំណភ្ជាប់របស់លោកអ្នក។

- កន្លែងដែលខ្ញុំចំណាំដោយ អក្សរ LINK1; LINK2..... លោកអ្នកអាចប្តូរទៅជាពាក្យដែលលោកអ្នកចង់ដាក់។

មានបញ្ហាទាក់ទង សូមបញ្ចេញមតិខាងក្រោម សន្ទនាសន្ទនា រូបស្ទីគ័ររូបស្ទីគ័រ

Subscribe to: Post Comments (Atom)