จะลองทำเมนูด้านบนบปติมันจะเป็นแบบเรียงๆ กัน โดยดึงข้อมูลจากตารางซึ่งทำได้แล้ว แต่พอจะมาทำแบบ dropdown ยังทำไม่ได้ครับ
$this->widget('zii.widgets.CMenu', array(
'activeCssClass'=>'active',
'id'=>'navigation',
'items'=>array(
array('label'=>'Cal4info', 'url'=>array('/site/index')),
array('label'=>'Hot Deals', 'url'=>array('/company/aboutUs'),
'submenuOptions'=>array('class'=>'nav-sub'),'items'=>array(
array('label'=>'SubItem1', 'url'=>array('site/anot','id'=>'12')),
array('label'=>'SubItem2', 'url'=>array('site/anot','id'=>'13')),
)
),
array('label'=>'Event', 'url'=>array('/company/careers'),
'submenuOptions'=>array('class'=>'nav-sub'),'items'=>array(
array('label'=>'SubItem1', 'url'=>array('site/anot','id'=>'12')),
array('label'=>'SubItem2', 'url'=>array('site/anot','id'=>'13')),
)),
array('label'=>'Travels', 'url'=>array('/company/contactUs')),
array('label'=>'Hospital', 'url'=>array('/company/storeLocator')),
array('label'=>'Real Estate', 'url'=>array('/company/storeLocator')),
array('label'=>'Advertise', 'url'=>array('/company/storeLocator')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
),
'htmlOptions'=>array('class'=>'nav-main'),
));
CSS
#navigation {
margin:0;
padding: 0;
clear:both;
width:1000px;
height:51px;
background: #d6eaf8 url(images/dropdown-bg.gif) repeat-x left top;
}
ul.nav-main,
ul.nav-main li {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main {
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul {
visibility: visible;
}
ul.nav-main li.hover,
/*ul.menu1 li a.first{border-left:1px solid #37526b;}*/
ul.nav-main li.active a{
position: relative;
z-index: 599;
cursor: pointer;
background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li:hover {
position: relative;
z-index: 599;
cursor: pointer;
background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li {
float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
background: url(images/separator.gif) no-repeat right center;
}
ul.nav-main li a {
display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
ul.nav-main li a:hover {
color:#D6D6D6;
}
ul.nav-main *.list {
padding-right: 22px;
background: url(images/navigation-arrow.gif) no-repeat right top;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}
ตอบ/อธิบาย