Yabancı kaynaklı bir sitede bulmuş olduğum Superfish ile Wordpress'de Açılır Menü Yapımı hakkında ki yazıdan türkçe kaynaklı sitelerde bulamadığım için burada yazmak istedim. Yapacağımız aslında çok basit yazının en altında demo sayfada yapmış olduğum menünün resmi mevcuttur.

1. Adım (İndirme)

Superfish dosyasını indirin.

2. Adım (Dosya Yapısı)

İndirdiğimiz dosyadaki css ile js dosyalarının isimlerini superfish-css ile superfish-js olarak değiştirelim.

3. Adım (JS ve CSS Dosyalarının Çekimi)

< /head> tagından önce ekleyin


add_action( 'wp_enqueue_scripts', 'superfish_libs' );
function superfish_libs()
{
// Register each script, setting appropriate dependencies
wp_register_script('hoverintent', get_template_directory_uri() . '/superfish-js/hoverIntent.js');
wp_register_script('bgiframe', get_template_directory_uri() . '/superfish-js/jquery.bgiframe.min.js');
wp_register_script('superfish', get_template_directory_uri() . '/superfish-js/superfish.js', array( 'jquery', 'hoverintent', 'bgiframe' ));
wp_register_script('supersubs', get_template_directory_uri() . '/superfish-js/supersubs.js', array( 'superfish' ));
// Enqueue supersubs, we don't need to enqueue any others in this case, as the dependencies take care of it for us
wp_enqueue_script('supersubs');
// Register each style, setting appropriate dependencies
wp_register_style('superfishbase', get_template_directory_uri() . '/superfish-css/superfish.css');
wp_register_style('superfishvert', get_template_directory_uri() . '/superfish-css/superfish-vertical.css', array( 'superfishbase' ));
wp_register_style('superfishnavbar', get_template_directory_uri() . '/superfish-css/superfish-navbar.css', array( 'superfishvert' ));
// Enqueue superfishnavbar, we don't need to enqueue any others in this case either, as the dependencies take care of it
wp_enqueue_style('superfishnavbar');
}
?>

4. Adım (Wordpress'e Entegre)

5. Adım (Menü Ekleme)

Ayarlarımızı kaydettikten sonra www.siteadınız.com/wp-admin de Görünüm > Menüler'e giriyoruz. Eğer ekli menümüz yoksa buradan yeni bir menü ekliyoruz.

6. Adım

Css dosyalarının düzenlenmesi



/* Aşağıdaki kodu bul: */
.sf-menu a, .sf-menu a:visited {
color: #13a;
}
.sf-menu li {
background: #BDD2FF;
}
/* Aşağıdaki kod ile değiştir: */
.sf-menu a, .sf-menu a:visited {
color: #999; /*#13a;*/
}
.sf-menu li {
background: #ccc;/*#BDD2FF;*/
}




/* Aşağıdaki kodu bul: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
/* Aşağıdaki kod ile değiştir: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #eee;
outline: 0;
color: #111;
}





/* Aşağıdaki kodu bul: */
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
/* Aşağıdaki kod ile değiştir: */
.sf-shadow ul {
/*background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;*/
}


Son Hali:

Kaynak: BurakSah.in