Posts: 4
Threads: 1
Joined: Aug 2017
I have installed the I18N plugin to create a pulldown menu. According to the
documentation I added this code instead of the original one.
Code:
<?php get_i18n_navigation(return_page_slug(),1,100); ?>
But it doesn't work. Has anyone an idea about the origin of the problem? This is the link of the unfinished
website.
Posts: 1,928
Threads: 88
Joined: Apr 2010
(2017-08-31, 06:55:32)fume Wrote: I have installed the I18N plugin to create a pulldown menu. According to the documentation I added this code instead of the original one.
Code:
<?php get_i18n_navigation(return_page_slug(),1,100); ?>
But it doesn't work. Has anyone an idea about the origin of the problem? This is the link of the unfinished website.
Try it like this
Code:
<?php get_i18n_navigation(return_page_slug(),0,100); ?>
Posts: 4
Threads: 1
Joined: Aug 2017
Thank you, this was the trick.
But now the main menu entry goes up and the child menu is in the same level like the rest of the navigation (klick the link "Ratgeber"):
![[Image: open?id=0B7ftWbUWSFWXbkhvb3JzTVVvcGM]](https://drive.google.com/open?id=0B7ftWbUWSFWXbkhvb3JzTVVvcGM)
Posts: 1,928
Threads: 88
Joined: Apr 2010
Posts: 1,127
Threads: 136
Joined: Feb 2012
That theme only includes css to display simple, single level navigation. You are welcome to add some.
This business of support for multi level nav confuses a lot of people so I wrote an explanation in the wiki here:
http://get-simple.info/wiki/multi-level_navigation
Posts: 4
Threads: 1
Joined: Aug 2017
Ok, I understand. I will try it. I'm not sure if I have the know how...
Posts: 44
Threads: 8
Joined: May 2014
(2017-08-31, 18:31:28)fume Wrote: Ok, I understand. I will try it. I'm not sure if I have the know how...
try this code:
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Three level menu</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
/* page width and center poisiton */
.wrapper{
margin:0 auto;
max-width:800px;
}
/* */
#header-menu {
height: 38px;
/*
margin: 5px auto 0 200px;
padding-left: 0;
*/
position: relative;
width: 100%;
}
/* START MULTIPLE LEVEL MENU */
#nav {
float: left;
margin: 0;
padding: 0;
border-bottom: none;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 11px;
text-decoration: none;
color: white;
background: red;
width:150px;
}
#nav li a:hover {
background:#000;
}
/* Submenu indicator */
.hasChildren {
position: absolute;
width: 8px;
height: 8px;
background: #ccc;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}
#nav li:hover > ul {
display: block;
background:#262626;
}
#nav li ul li, #nav li ul li a {
float: none;
font-size:14px;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
/* 2 LEVEL MENU STYLE */
#nav li ul li a {
width: 150px;
display: block;
border-top:1px dotted #252525; /* 2 level */
border-bottom:1px dotted transparent; /* 2 level */
background:#46586E;
font-size:14px;
}
/* 3 LEVEL MENU STYLE */
#nav li ul li ul {
display: none;
border-left:1px dotted #3E545F;
}
#nav li ul li:hover ul { /* 3 level */
left: 100%;
top: 0;
font-size:14px;
background:#262626;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header-menu">
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">Child 1</a></li>
<li>
<a href="#">Child 2</a>
<ul><li><a href="#">Child 2-1</a></li></ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
/* script for three level menu */
var site = function() {
this.navLi = $('#nav li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
// Enables the slidedown menu, and adds support for IE6
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
// mouseover
$(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
}, function() {
// mouseout
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
</script>
</html>
Download
