GetSimple Support Forum
PROBLEM Pulldown menu - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Plugins (http://get-simple.info/forums/forumdisplay.php?fid=13)
+--- Thread: PROBLEM Pulldown menu (/showthread.php?tid=9972)



Pulldown menu - fume - 2017-08-31

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.


RE: Pulldown menu - Oleg06 - 2017-08-31

(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); ?>



RE: Pulldown menu - fume - 2017-08-31

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]


RE: Pulldown menu - Oleg06 - 2017-08-31

you need to adjust CSS


RE: Pulldown menu - Timbow - 2017-08-31

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


RE: Pulldown menu - fume - 2017-08-31

Ok, I understand. I will try it. I'm not sure if I have the know how...


RE: Pulldown menu - smdp-1971 - 2017-08-31

(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>