Navigasi Menu

tolong dong para master yii semua…

saya baru banget belajar pembuatan aplikasi web.apalagi menggunakan yii.mau tanya dong kalo ingin membuat menu navigasi seperti gambar dibawah ini gimana caranya ya?pengennya menu ini tampil di sisi kiri aplikasi dan muncul di semua halaman.ditunggu jawabanyya ya para master.terima kasih buat yang sudi menjawab :rolleyes:

pake layout sam,

untuk contoh jadi coba buka lagi tutorial (dan source code) blog dari yii documentation,

langkahnya kurang lebih gini

  1. pertama definisiin dulu block htmlnya,

  2. pecah master page (block yg muncul di seluruh halaman, misal header + footer) ke file protected/views/layouts/main.php

  3. pecah block yg berhubungan dengan layout content di protected/views/layouts/namalayout.php (eg: column1.php, column2.php)

  4. pada controller set layout yg mo diload

contoh:

  1. block htmlnya kek gini:

<html>

 <head>...</head>

 <body>

   <div class="header">...</div>

<section class="container" role="main">

<article class="row">

    <div class="span3">

        <div id="sidebar">

          <a href="#">menu 1</a> | <a href="#">menu 2</a>

        </div><!-- sidebar -->

    </div>

    <div class="span9">

        <div id="content">

         ....content_utamanya_disini....

        </div><!-- content -->

    </div>

</article>

</section> 

   <div class="footer">...</div>

 </body>

</html>

  1. isinya protected/views/layouts/main.php

<html>

 <head>...</head>

 <body>

   <div class="header">...</div>

     <!-- start.main-block --><?php echo $content; ?><!-- end.main-block -->

   <div class="footer">...</div>

 </body>

</html>

  1. navigasi di kiri (protected/views/layouts/column2-nav-kiri.php

<?php $this->beginContent('//layouts/main'); ?>

<section class="container" role="main">

<article class="row">

    <div class="span3">

        <div id="sidebar">

          <a href="#">menu 1</a> | <a href="#">menu 2</a>

        </div><!-- sidebar -->

    </div>

    <div class="span9">

        <div id="content">

            <?php echo $content; ?>

        </div><!-- content -->

    </div>

</article>

</section> 

<?php $this->endContent(); ?>

  1. cara manggilnya di controller

class NgasalController extends Controller

{

  public $layout='//layouts/column2-nav-kiri';


  public functcion actionForm_siswa() {

    //otomatis akan dirender dengan layout column2-nav-kiri.php

    $this->render('siswa', array());

  }



update: kalo karna 1 dan lainnya kita juga perlu yg nav-nya di kanan, atau halaman tertentu tanpa nav sama sekali, tinggal definisikan layoutnya aja.

contoh:

  1. b. protected/views/layouts/column2-nav-kanan.php

<?php $this->beginContent('//layouts/main'); ?>

<section class="container" role="main">

<article class="row">

    <div class="span9">

        <div id="content">

            <?php echo $content; ?>

        </div><!-- content -->

    </div>

    <div class="span3">

        <div id="sidebar">

          <a href="#">menu 1</a> | <a href="#">menu 2</a>

        </div><!-- sidebar perhatiin saya sekarang di kanan -->

    </div>

</article>

</section> 

<?php $this->endContent(); ?>

  1. c. protected/views/layouts/column1.php

<?php $this->beginContent('//layouts/main'); ?>

<section class="container" role="main">

<article class="row">

    <div class="span12">

        <div id="content">

            <?php echo $content; ?>

        </div><!-- content perhatiin saya gak punya nav -->

    </div>

</article>

</section> 

<?php $this->endContent(); ?>

  1. cara manggilnya di controller

class NgasalController extends Controller

{

  public $layout='//layouts/column2-nav-kiri';


  public functcion actionForm_siswa() {

    //otomatis akan dirender dengan layout column2-nav-kiri.php

    $this->render('siswa', array());

  }




  public functcion actionForm_guru() {

    $this->layout='//layouts/column2-nav-kanan';

    $this->render('guru', array());

  }


  public functcion actionError_page() {

    $this->layout='//layouts/column1';

    $this->render('pesan_error', array());

  }



waah makasih banget agan daudtm yang mau jelasin panjang lebar…sekarang jadi ada gambaran.oke dicoba dulu gan…oia gan mau nanya lagi.hhe

kalo :




<div class="span3">

        <div id="sidebar">

          <a href="#">menu 1</a> | <a href="#">menu 2</a>

        </div><!-- sidebar -->

    </div>



itu kan munculnya side bar biasa ya gan.nah biar tampilannya kaya gambar ane itu gimana gan?jadi kalo menu 1 di klik muncul sub menu dibawahnya.trus kalo di klik lagi sub menu nya hidden.menu 2 dst juga gitu…itu gimana ya gan?maap ya gan kalo pertanyaannya nggak penting.bener2 baru belajar bikin web.makasih kalo sudi menjawab gan :rolleyes:

itu pake css 3 bisa gan.

ini demonya gan : demo

tutorial sama download script nya dimari : tutorial & download

trus cara nya bikin di yii kayak yg om daudtm jelasin. jgn lupa css nya dipanggil di layoutnya gan.

terimakasih agan cyber1924 yang baik hati dan tidak sombong ;D

langsung ke TKP gan -->>

tergantung framework cssnya, sam.

kalo pake jquery ui, yg bisa ngasih experience mirip itu coba pake accordion,

kalo pake bootstrap biasanya nav-bar bisa pills, bisa digabungin accordion,

ato kalo mo lebih kreatif, googling aja dengan keyword berbasis itu: jquery accordion menu plugins, dll

kadang nemu tutorial, kadang nemu script yg bisa dipake langsung, ni contoh buat bootstrap

tutorial dasar navbar

dropdown menu

update: lah, udah dijawab sam cyber ternyata, ni browser aneh, suka ngecache halaman (yg dari yiiforum doang).