อยากทราบวิธีทำเมนูแบบdropdown โดยดึงข้อมูลจากตาราง

wave
วีระพล ประทัด
3,377
สังคมนักพัฒนาระบบ (Community)
อยากทราบวิธีทำเมนูแบบdropdown โดยดึงข้อมูลจากตาราง

จะลองทำเมนูด้านบนบปติมันจะเป็นแบบเรียงๆ กัน โดยดึงข้อมูลจากตารางซึ่งทำได้แล้ว แต่พอจะมาทำแบบ dropdown ยังทำไม่ได้ครับ

4 ความคิดเห็น

  • มานพ กองอุ่น

  • วีระพล ประทัด
จะลองทำเมนูด้านบนบปติมันจะเป็นแบบเรียงๆ กัน โดยดึงข้อมูลจากตารางซึ่งทำได้แล้ว แต่พอจะมาทำแบบ dropdown ยังทำไม่ได้ครับ
จริงๆ แล้วก็มีวีดีโออยู่นะครับ [การดึงข้อมูลจากตารางอื่นมาแสดงเป็น DropDownList](http://www.programmerthailand.com/vdos/114/ "การดึงข้อมูลจากตารางอื่นมาแสดงเป็น DropDownList") และอีกวีดีโอครับ [การสร้าง Dropdownlist สำหรับการเก็บข้อมูลแบบ ENUM](http://www.programmerthailand.com/vdos/59/ "การสร้าง Dropdownlist สำหรับการเก็บข้อมูลแบบ ENUM")
อยากทำเมนูด้านบนจาก cmenu ทำในลักษณะ submenu นะครับ
ลองอันนี้นะครับ $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; }