ការធ្វើម៉ឺនុយបែបនេះ អ្នកអាចសម្រេចទៅបានដោយការប្រើប្រាស់ jQuery ប៉ុន្តែនៅពេលនេះ អ្នកក៏អាចធ្វើវាបានដោយប្រើ CSS3 ផងដែរ។
Accordion គឺជាលក្ខណៈប្រអប់ម្យ៉ាងសម្រាប់ផ្ទុកធាតុបានច្រើនយ៉ាង ដូចជាម៉ឺនុយ អត្ថបទ និងដទៃផ្សេងទៀត។ Accordion ត្រូវបានគេប្រើភាគច្រើននៅក្នុង Sidebar ឬក៏តំបន់ Slideshow ណាមួយដែរ ព្រោះវាប្លែកនិងចំណេញកន្លែង (សម្រាប់ Sidebar).
ក្នុងមេរៀននេះនឹងបង្ហាញអ្នកឲ្យដឹងអំពីរបៀបបង្កើតបង្កើត CSS3 Content Accordion។ វាអាចដើរបានល្អនៅលើកម្មវិធីវែបណាដែលស្គាល់ :target selector។
មានគេហទំព័រជាច្រើនបានប្រើប្រាស់ទិដ្ឋភាពផ្លាស់ប្ដូរទំព័រ (Page Transition Effect) ជាមួយនឹង JavaScript។ តែក្នុងពេលនេះ អ្នកអាចធ្វើទិដ្ឋភាពបែបនោះ ដោយប្រើត្រឹមតែ CSS ប៉ុណ្ណោះ។
ក្រៅអំពីម៉ឺនុយនិងអក្សរ, Accordion ក៏អាចបង្កើតឡើងសម្រាប់រូបភាពដែរ។ អ្នកអាចប្រើវាជំនួស Slide បានដែរ។
Cycle Slideshow ជាប្រភេទ slideshow ម្យ៉ាងដែលមានការផ្លាស់ប្ដូរជាលក្ខណៈវដ្ត។
នេះគឺជាលក្ខណៈម៉ឺនុយ Accordion មួយបែបទៀតដែលត្រូវបានបង្កើតឡើងជាមួយនឹង CSS3 និង jQuery។
នេះគឺជាលក្ខណៈម៉ឺនុយ Accordion មួយបែបទៀតដែលត្រូវបានបង្កើតឡើងជាមួយនឹង CSS3 និង jQuery។
Step 1. HTML
As usual, we start with the HTML. Here is the html code of our menu. As usual – this is again UL-LI based navigation menu. The most interesting thing will be CSS styles of course.index.html
Step 2. CSS
Here are the CSS styles of our LavaLamp menu.css/menu.css
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
}
No comments:
Post a Comment