Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
PROBLEM Pulldown menu
#1
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.
Reply
#2
(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); ?>
Reply
#3
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]
Reply
#4
you need to adjust CSS
Reply
#5
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
Reply
#6
Ok, I understand. I will try it. I'm not sure if I have the know how...
Reply
#7
(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>
Reply




Users browsing this thread: 1 Guest(s)