គន្លឹះ​ដាក់​ មីនុយ (Menu) នៅ​ផ្នែក​ខាង​លើ​នៃ​ក្បាល​ទំព័រ ក្នុង​ប្លុក

   ទីងមោងៗ តើ​យើង​អាច​ដាក់ មីនុយ (Menu) នៅ​ខាង​លើ ក្បាល​ទំព័រ (Header) បាន​ដូច​ម្តេច? នេះ​ជា​សម្លេង​ដែល​គេ​បាន​សួរ​ខ្ញុំ និង​ជា​សម្លេង​ដែល​ខ្ញុំ​បាន​សួរ​ខ្លួន​ឯង។ ដូច​នេះ ខ្ញុំ​សូម​បក​ស្រាយ​បង្ហាញ​ពី​របៀប​ដាក់​មីនុយ នៅ​ផ្នែក​ខាង​លើ​នៃ​ប្លុក​របស់​យើង។ នៅ​ក្នុង ស្បែក​ប្លុក​ដែល​មាន​ស្រាប់​របស់​ប្លុកករ​គ្មាន​មុខ​ងារ​នៃ​ទេ ដូច​នៃ វា​អាស្រ័យ​ទៅ​លើ​ការ​ចេះ​បន្ថែម និង​ចេះ​អំពី​របៀប​ដាក់​កូដ​របស់​យើង។ សូម​លោក​អ្នក​មើល​អត្ថបទ​គម្រូ​ខាង​ក្រោម​របស់​ខ្ញុំ​បាទ!។

   ការ​ដាក់​មីនុយ​ នៅ​ខាង​លើ​ក្បាល​ទំព័រ​នេះ មិន​មែន​ជា​ការ​ដាក់​មីនុយ​ ធម្មតា​ដែល​លោក​អ្នក​គ្រាន់​តែ​ដាក់​​តាម CSS ហើយ​មក​ចាប់ Style នៅ​លើ HTML នោះ​ទេ គឺ​វា​មាន​លក្ខណៈ​ច្បាស់​លាស់​ជាង។ :D ហេស!!​ហេ!!... ដូចនេះ ដើម្បី​ស្រាយ​ចម្ងល់​របស់​លោក​អ្នក ក៏​ដូច​ជា​កត់​ត្រា​ទុក​នូវ​គន្លឹះ​នេះ សម្រាប់​ខ្ញុំ​នៅ​ពេល​ក្រោយ ខ្ញុំ​សូម​បង្ហាញ​គន្លឹះ​នេះ។

៙ ​ដាក់​ មីនុយ (Menu) នៅ​ផ្នែក​ខាង​លើ​នៃ​ក្បាល​ទំព័រ ក្នុង​ប្លុក ៖ 
- កត់ត្រា​ចូល Log In ក្នុង​គណនី​ Blogger របស់​អ្នក​។
- ចូល​ទៅ​កាន់​ម៉ឺនុយ Template >> Edit HTML (មើលរូប)

- រក​មើល​ស្លាក <b:skin>...</b:skin> ដោយ​ចុច​លើ​សញ្ញា​ព្រួញ​ពណ៌ខ្មៅ​ដែល​នៅ​ពី​​មុខ​វា

 - រមូល​ចុះ (scroll down) ទៅ​ដល់ ]]></b:skin>
- ចម្លង​កូដ​ខាង​ក្រោម​ទៅ​បិទ​​ភ្ជាប់​ ​នៅ​ពី​លើ​ស្លាក ]]></b:skin> ​។ (មើល​ឲ្យ​ច្បាស់​ពី ទី​តាំង​ដាក់​កូដ)

កូដ​ដែល​ត្រូវ​យក​ទៅ​ដាក់​នៅ​ខាង​លើ​ស្លាក ]]></b:skin>

.shadowblockmenu ul{
 border: 2px solid #FF8900
 border-width: 0px 0; /* Show only top and bottom border for main menu container */
 padding: 5px;
 margin: 0;
 overflow: hidden;
 }
 .shadowblockmenu ul li{
 display: inline;
 margin:0;
 padding:0;
 }
 .shadowblockmenu ul li a{
 display:block;
 float:left;
 text-transform: uppercase;
 color: white;
 padding: 8px 15px 8px 9px;
 margin: 0;
 text-decoration: none;
 border-right: 0px solid #BBB; /*right border between menu items*/
 -moz-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
 -webkit-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
 box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);
 text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
 -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
 -webkit-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 } 

- បន្ត​ពី​នោះ​មក លោក​អ្នក​ត្រូវ​ស្វែងរក​កូដ ៖

div class='fauxborder-left header-fauxborder-left'>

- ពេល​ដែល​រក​កូដ​នោះ​ឃើញ​ហើយ សូម​ធ្វើ​ការ​បិទ​ភ្ជាប់​នូវ​កូដ​មីនុយ​ខាង​ក្រោម (មើល​រូប) ៖

កូដ​ដែល​ត្រូវ​យក​ទៅ​​បិទ​ភ្ជាប់

 <div class='shadowblockmenu'>
 <ul>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 <li><a href='#'>Privacy Policy</a></li>
 <li><a href='#'>Sitemap</a></li>
  </ul>
      </div>

*** សម្គាល់​ជា​សំខាន់ ៖
- លោក​អ្នក​ត្រូវ​​ផ្លាស់​ប្តូរ​ពាក្យ ៖ " Home, About,...." ទៅ​ជា​ពាក្យ​ដែល​លោក​អ្នក​ពេញ​ចិត្ត។
- ចំពោះ​ សញ្ញា​ទ្រុង​ជ្រូក ( # ) ជា​កន្លែង​បិទ​ភ្ជាប់ Link URL របស់​អ្នក។
* ជា​ចុង​ក្រោយ​អ្នក​នឹង​បាន​លទ្ធផល​ដូច​ខ្ញុំ​បាទ។ :D

អត្ថបទស្រដៀងគ្នា:

Tweet