Indonesia English

Horizontal Multi Level Menu CMS Lokomedia

Penulis : | Senin, 28 Maret 2016 Kategori : Script Gratis - Dibaca : 1160 kali

rangkasku

Hampir semua website memiliki menu yang biasa digunakan oleh cms terkenal dan cms lokomedia juga bisa mengunakannya dari yang satu level sampai penggunaan multi level. Multi level menu atau menu bertingkat adalah struktur di mana sebuah menu memiliki submenu dan submenu tersebut juga memiliki sub lagi dan seterusnya sampai tidak terbatas.

ikuti langkah-langkah berikut untuk penggunaanya

contoh struktur html biasa tanpa css dan database

<ul>
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a>
	<ul>
		<li><a href="#">Sub Menu 3.1</a></li>
		<li><a href="#">Sub Menu 3.2</a>
		<ul>
			<li><a href="#">Sub Menu 3.2.1</a></li>
			<li><a href="#">Sub Menu 3.2.2</a></li>
			<li><a href="#">Sub Menu 3.2.3</a></li>
		</ul>
		</li>
		<li><a href="#">Sub Menu 3.3</a></li>
	</ul>
	</li>
	<li><a href="#">Menu 4</a></li>
</ul>

Kode html tersebut akan menghasilkan tampilan seperti gambar berikut :

Menu tersebut akan terlihat indah jika dipadukan dengan css dan jquery, tapi pada kesempatan ini pure menggunakan css untuk memperindah tampilannya.

Berikut kode css untuk tampilan menu

/* Bagian Menu */
#wrapper {vertical-align:bottom;width:100%;height:96%}
#wrapper #clear,#menu_drop_down:after{clear:both}
#menu_drop_down li:hover > a,*html #menu_drop_down li a:hover{color:#fafafa}
	#menu_drop_down, #menu_drop_down ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#menu_drop_down {
		width: 100%;
		margin-top: 30px;
		margin-bottom: 10px;
		border: 1px solid #222;
		background-color: #111;
 	}
	#menu_drop_down:before,
	#menu_drop_down:after {
		content: "";
		display: table;
	}
	#menu_drop_down:after {
		clear: both;
	}
	#menu_drop_down {
		zoom:1;
	}
	#menu_drop_down li {
		float: left;
		border-right: 1px solid #222;
		-moz-box-shadow: 1px 0 0 #444;
		-webkit-box-shadow: 1px 0 0 #444;
		box-shadow: 1px 0 0 #444;
		position: relative;
	}
	#menu_drop_down a {
		float: left;
		padding: 12px 20px;
		color: #999;
		text-transform: uppercase;
		font: bold 12px Arial, Helvetica;
		text-decoration: none;
		text-shadow: 0 1px 0 #000;
	}
	#menu_drop_down li:hover > a {
		color: #fafafa;
	}
	*html #menu_drop_down li a:hover { /* IE6 only */
		color: #fafafa;
	}
	#menu_drop_down ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: 0;
		z-index: 9999;    
		background: #444;
		background: -moz-linear-gradient(#444, #111);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
		background: -webkit-linear-gradient(#444, #111);    
		background: -o-linear-gradient(#444, #111);	
		background: -ms-linear-gradient(#444, #111);	
		background: linear-gradient(#444, #111);
		-moz-box-shadow: 0 -1px rgba(255,255,255,0.3);
		-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.3);
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;  
	}
	#menu_drop_down li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	#menu_drop_down ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);		
	}
	#menu_drop_down ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	}
	#menu_drop_down ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	#menu_drop_down ul a {    
		padding: 10px;
		width: 130px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
	}
	#menu_drop_down ul a:hover {
		background-color: #0186ba;
		background-image: -moz-linear-gradient(#04acec,  #0186ba);	
		background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
		background-image: -webkit-linear-gradient(#04acec, #0186ba);
		background-image: -o-linear-gradient(#04acec, #0186ba);
		background-image: -ms-linear-gradient(#04acec, #0186ba);
		background-image: linear-gradient(#04acec, #0186ba);
	}
	#menu_drop_down ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	#menu_drop_down ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #444;
	}
	#menu_drop_down ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #3b3b3b;
	}
	#menu_drop_down ul li:first-child a:hover:after {
		border-bottom-color: #04acec; 
	}
	#menu_drop_down ul ul li:first-child a:hover:after {
		border-right-color: #0299d3; 
		border-bottom-color: transparent; 	
	}
	#menu_drop_down ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}

Membuat database

CREATE TABLE IF NOT EXISTS `menu` (
  `id_menu` int(5) NOT NULL,
  `id_parent` int(5) NOT NULL DEFAULT '0',
  `nama_menu` varchar(30) NOT NULL,
  `link` varchar(100) NOT NULL,
  `aktif` enum('Y','N') NOT NULL DEFAULT 'Y',
  `urutan` int(2) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=48 DEFAULT CHARSET=latin1;

Membuat fungsi menu

Fungsi ini  gunakan untuk membuat list secara dinamis dari database yang telah dibuat. fungsi ini menggunakan sebuah fungsi rekursif untuk mengambil menu sampai ke level tak terbatas.

function multi_menu($data, $parent = 0) {
          static $i = 1;
          $tab = str_repeat("", $i);
          if (isset($data[$parent])) {
              $html = $tab;
              $i++;
              foreach ($data[$parent] as $v) {
                   $child = multi_menu($data, $v->id_menu);
                   $html .= "$tab<li>";
                   $html .= '<a href="'.$v->link.'">'.$v->nama_menu.'</a>';
                    if ($child) {
                       $i--;
                       $html .= "<ul>".$child;
                       $html .= $tab."</ul>";
                   }
                   $html .= '</li>';
              }
              $html .= $tab;
              return $html;
          }
        else {
              return false;
          }
}

Kemudain kita panggil fungsi tersebut dari database dengan perintah php dan mysql

	mysql_connect("localhost","root","") or die("Koneksi gagal");
	mysql_select_db("db_menu") or die("Database tidak bisa dibuka");

	$result = mysql_query("SELECT * FROM menu where aktif='Y' ORDER BY id_menu");
	while ($row = mysql_fetch_object($result)) {
           $data[$row->id_parent][] = $row;
	}
	$menu = multi_menu($data);
	echo $menu;   

 


    

Artikel Terkait

Belum ada Komentar pada : Horizontal Multi Level Menu CMS Lokomedia

Tulis Komentar Dengan Bijak Sesuai dengan ToS

Nama
Email
Website
Komentar
 
Incorrect please try again
Masukan kata di atas: Masukan nomor yang kamu dengar:
 

rangkasku hari ini : 110
rangkaskuTotal : 183058

rangkaskuHits hari ini : 908
rangkaskuTotal Hits : 1104192

rangkaskuOnline: 2
Berlangganan Artikel close