៙ របៀបបង្កើត Fixed Menu បង្ហាញតែនៅពេលដែល Scrolling ទំព័រចុះក្រោម ៖
- កត់ត្រាចូល Log In ក្នុងគណនី Blogger របស់អ្នក។
- ចូលទៅកាន់ម៉ឺនុយ Template >> Edit HTML (មើលរូប)
- ចម្លងកូដខាងក្រោមទៅបិទភ្ជាប់ នៅពីលើស្លាក ]]></b:skin>
កូដដែលត្រូវយកទៅដាក់ពីលើស្លាក ]]></b:skin>
/*----- Menu -----*/
#ozg-menu{
margin-bottom:10px;
}
#ozg-menu ul{
list-style-type: none;
padding: 0;
}
#ozg-menu ul li{
display: inline-block;
}
#ozg-menu ul li a{
display: inline-block;
font-family: Electrolize, sans-serif;
text-decoration: none;
font-weight: normal;
padding: 4px 6px 4px 6px;
color: #fff;
}
#ozg-menu ul li a:hover{
color: #fff;
border-bottom: 3px solid #99FF00;
padding:4px 6px 1px 6px;
}
.menunormal{
padding: 4px 6px 4px 6px;
background: #9F8A12;
}
/*----- Menu When Scroll -----*/
.menufixed {
position: fixed;
top: -2px;
left: 0;
width: 100%;
padding: 4px 6px 4px 6px;
background: #0B7271;
color: #f8f8f8;
-webkit-transition: top 500ms ease 0s;
-moz-transition: top 500ms ease 0s;
-o-transition: top 500ms ease 0s;
-ms-transition: top 500ms ease 0s;
transition: top 500ms ease 0s;
box-shadow: 0 0 45px #222;
-webkit-box-shadow: 0 0 35px #222;
-moz-box-shadow: 0 0 35px #222;
}
.menufixed ul{
width: 450px;
margin: 0 auto;
}
#ozg-menu{
margin-bottom:10px;
}
#ozg-menu ul{
list-style-type: none;
padding: 0;
}
#ozg-menu ul li{
display: inline-block;
}
#ozg-menu ul li a{
display: inline-block;
font-family: Electrolize, sans-serif;
text-decoration: none;
font-weight: normal;
padding: 4px 6px 4px 6px;
color: #fff;
}
#ozg-menu ul li a:hover{
color: #fff;
border-bottom: 3px solid #99FF00;
padding:4px 6px 1px 6px;
}
.menunormal{
padding: 4px 6px 4px 6px;
background: #9F8A12;
}
/*----- Menu When Scroll -----*/
.menufixed {
position: fixed;
top: -2px;
left: 0;
width: 100%;
padding: 4px 6px 4px 6px;
background: #0B7271;
color: #f8f8f8;
-webkit-transition: top 500ms ease 0s;
-moz-transition: top 500ms ease 0s;
-o-transition: top 500ms ease 0s;
-ms-transition: top 500ms ease 0s;
transition: top 500ms ease 0s;
box-shadow: 0 0 45px #222;
-webkit-box-shadow: 0 0 35px #222;
-moz-box-shadow: 0 0 35px #222;
}
.menufixed ul{
width: 450px;
margin: 0 auto;
}
- បន្ទាប់មកទៀត សូមស្វែងរក </head> ហើយ Past កូដ ខាងក្រោមនៅពីលើ </head>
<script src='http://oqzigen.googlecode.com/files/ozg-menu.js' type='text/javascript'/>
-ជាចុងក្រោយ អ្នកគ្រាន់តែដាក់កូដ HTML ខាងក្រោមនេះ នៅកន្លែងណាមួយដែលអ្នកចង់ដាក់។ ឧទាហរណ៍ បើសិនជាអ្នកចង់ឲ្យមីនុយនេះ បង្ហាញនៅកំពូលប្លុក អ្នកគ្រាន់តែយកកូដនេះ ទៅដាក់ពីខាងក្រោម <body> ជាការស្រេច។
<nav>
<div id="ozg-menu" class="normal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div id="ozg-menu" class="normal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
*** សម្គាល់ជាសំខាន់ ៖
- លោកអ្នកត្រូវផ្លាស់ប្តូរពាក្យ ៖ " Home, About,...." ទៅជាពាក្យដែលលោកអ្នកពេញចិត្ត។
- ចំពោះ សញ្ញាទ្រុងជ្រូក ( # ) ជាកន្លែងបិទភ្ជាប់ Link URL របស់អ្នក។
0 Response to "បង្កើត Fixed Menu បង្ហាញតែនៅពេលដែល Scrolling ទំព័រចុះក្រោម"
Post a Comment