វិធី​ងាយៗ​ក្នុង​ការ​បង្កើត​មីនុយ​ទម្លាក់ (Dropdown Menu) CSS ក្នុង Adobe Dreamweaver

   នេះ​គឺ​ជា​គន្លឹះ​មួយ​ក្នុង​ការ​បង្កើត មីនុយ​ទម្លាក់ CSS ក្នុង​កម្ម​វិធី Adobe Dreamweaver ដែល​ជា​កម្ម​វិធី​ដ៏​ពេញ​និយម​បំផុត​ក្នុង​ការ​ប្រើប្រាស់ ចំពោះ​ការ​រចនា​គេហទំព័រ និង​ការសរសេរ​កូដ​ ទាក់​ទង​ទៅ​នឹង​គេហទំព័រ។ ដោយ​សារ​ខ្ញុំ​ធ្លាប់​ជួប​នឹង​បញ្ហា​នេះ ក្នុង​ពេល​កំពុង​រៀន ដែល​មិន​ដឹង​ជា​ត្រូវ​បង្កើត​មីនុយ​ទម្លាក់​នេះ​តាម​វិធី​ណា​មួយ​នោះ​ទេ ទើប​តែ​ពេល​នេះ​ទើប​ខ្ញុំ​បាន​រក​ឃើញ​នៅ​ក្នុង​គេហទំព័រ​បរទេស​មួយ ដែល​ប្រាប់​ពី​គន្លឹះ​ទាំង​អស់​នេះ។ ដើម្បី​កុំ​ឲ្យ​សិស្ស​និស្សិត​របស់​យើង​ ដែល​ពិបាក​ក្នុង​ការ​បង្កើត​មីនុយ​ទម្លាក់​​បែប CSS នេះ​ ទើប​ខ្ញុំ​សូម​បក​ប្រែ​ពី​គន្លឹះ​នេះ មក​ជា​ភាសា​ជាតិ​យើង​ដើម្បី​ឲ្យ​ងាយ​យល់។ សូម​មើល​វិធី​ងាយៗ​ដូច​ខាង​ក្រោម ៖


៙ វិធី​ងាយៗ​ក្នុង​ការ​បង្កើត​មីនុយ​ទម្លាក់ (Dropdown Menu) CSS ក្នុង Adobe Dreamweaver ៖
- ជា​ដំបូង​អ្នក​ត្រូវ​បើក​កម្ម​វិធី Adobe Dreamweaver។
- ហើយ​​បង្កើត​សំណុំ​ឯកសារ​មួយ​ដែល​មាន​ឈ្មោះ​ថា HTML (សូម​មើល)

- សូ​ម​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​ដាក់​ក្នុង​នោះ ដោយ​ដាក់​នៅ​ទី​តាំង​សម​រម្យ​ណា​មួយ។ ឧទា​ហរណ៍​ខ្ញុំ​ដាក់​វា​នៅ​ខាង​ក្រោម </Head> ជា​ដើម។

កូដ​ដែល​ត្រូវ​ចម្លង​

<div id="navMenu">

  <ul>

     <li> <a href="#">Products</a>
 
  <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> <!-- end main LI -->

  </ul> <!-- end main UL -->

    <br class="clearFloat" />


 </div> <!-- end navMenu -->

*** បន្ត​ពី​នោះ​មក​សូម​បង្កើត​ឯកសារ​ថ្មី​មួយ​ទៀត (Ctrl +N) ហើយ​ជ្រើស​យក CSS ដើម្បី​ដាក់ Style CSS។ (មើលរូប)

- ចម្លង​កូដ​ខាង​ក្រោម​ទៅ​ក្នុង​នោះ ហើយ​រក្សា​ទុក​ឯក​សារ​ទាំង​ពីរ​នៅ​ក្នុង Folder តែ​មួយ ដោយ​ HTML (ដាក់​ឈ្មោះ​អ្វី​ក៏​បាន) ចំណែក CSS (គួរ​ដាក់​ឈ្មោះ​ថា CSS Menu.css) ដើម្បី​ងាយ​ស្រួល​ពេល​ខល​ហៅ​វា (បើ​សិន​ជា​អ្នក​មិន​ទាន់​ច្បាស់​កន្លែង​នោះ)។ :D

កូដ​ដែល​ត្រូវ​យក​ទៅ​ដាក់

 

#navMenu {
    margin:0;
    width:auto;
 }

  #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
 }

  #navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#999;
 }

  #navMenu ul li a {
    text-align:center;
    height:30px;
    width:150px;
    display:block;
    color:#000;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    color:#FFF;
    border:1px solid #FFF;
    text-shadow:1px 1px 1px #000;
 }

 /*********************************************/
 /* hide menu and allow it to return */
 /*********************************************/

    #navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
 }

  #navMenu ul li:hover ul {
    visibility:visible;
    z-index:9999;
 }

  /**********************************************/

  /*sets top level hover color*/

  #navMenu li:hover {
   background:#09F;
 }

  /*sets link items hover color and background*/

  #navMenu ul li:hover ul li a:hover {
    color:#000;
    background:#CCC;
 }

  /* Changes text color on hover for main menu hover*/

  #navMenu a:hover { 
  color:#000;
 }
 
 /* Contains the Float */

 .clearFloat {
    clear:both;
    margin:0;
    padding:0;
 }

 /* IE7 Display Fix */

 #navMenu ul li {

  display: inline;

 }

- សរសេរ​កូដ​​ខល​ហៅ CSS មក​ប្រើ​ជា​មួយ​ HTML ដោយ​បើ​ក​លើ HTML (មើល​រូប)

*** កូដ​ខល​ហៅ CSS : <link rel="stylesheet" type="text/css" href="CSS Menu.css">
៙ សេច​ក្តី​ពន្យល់​កូដ ៖
* នៅ​ត្រង់​កន្លែង "CSS Menu.css" គឺ​ជា​ឈ្មោះ​សំណុំ​ឯក​សារ CSS ដែល​អ្នក​ខល​ហៅ​យក​មក​ប្រើ។
- ពេល​ខល​ហៅ​វា​មក​ប្រើ​ហើយ សូម Save និង Preview វា​សាក​ល្បង។
៙៙៙ ជា​ទី​បញ្ចប់​អ្នក​នឹង​ទទួល​បាន​លទ្ធផល​ដូច​ខាង​ក្រោម ៖