New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow menu item root nesting class #311

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
3 participants
@JohnnyDevNull

JohnnyDevNull commented Nov 2, 2016

Implement new menu option menus.li-class-root-nesting, that only added
if a parent item has a nesting menu when nesting is true.

@Mairu

This comment has been minimized.

Show comment
Hide comment
@Mairu

Mairu Nov 2, 2016

Member

Da ich im Forum gesehen habe, dass du auch deutsch sprichst, antworte ich jetzt einfach mal auf deutsch.

Bist du dir sicher, dass diese Änderung notwendig ist.
Da ja nested nur ja oder nein sein kann, sollte das angeben einer li-class-root Klasse doch reichen? Da nie beide Klassen im gleichen Menü vorkommen können, oder übersehe ich da irgendwas?

Member

Mairu commented Nov 2, 2016

Da ich im Forum gesehen habe, dass du auch deutsch sprichst, antworte ich jetzt einfach mal auf deutsch.

Bist du dir sicher, dass diese Änderung notwendig ist.
Da ja nested nur ja oder nein sein kann, sollte das angeben einer li-class-root Klasse doch reichen? Da nie beide Klassen im gleichen Menü vorkommen können, oder übersehe ich da irgendwas?

Allow menu item root nesting class
Implement new menu option menus.li-class-root-nesting, that only added
if a parent item has a nesting menu wenn nesting is true.

Set router origin and implement menu active class

Adds the ability to get the users origin url and with that we can set a
menu item to active.
@JohnnyDevNull

This comment has been minimized.

Show comment
Hide comment
@JohnnyDevNull

JohnnyDevNull Nov 2, 2016

Naja um das default bootstrap Handling nachbilden zu können wäre dies schon sehr hilfreich. Habe meinen Commit nochmal nachgebessert. Es ist dann damit auch ein "active" Item Handling möglich.
Das sieht dann so aus:

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <?php
                    echo $this->getMenu(1,'%c', [
                        'menus' => [
                            'ul-class-root' => 'nav navbar-nav',
                            'ul-class-child' => 'dropdown-menu',
                            'li-class-root' => '',
                            'li-class-root-active' => 'active',
                            'li-class-root-nesting' => 'dropdown',
                            'li-class-child' => '',
                            'allow-nesting' => true,
                        ],
                        'boxes' => [
                            'render' => false,
                        ],
                    ]);
                    ?>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

Und mit folgendem CSS hat man dann sofort ein Hover-Dropdown ohne noch viel zutun zu müssen:

    /* make it hovering */
    ul.nav li.dropdown:hover ul.dropdown-menu {
        display: block;
        margin-top: 0px;
    }

    /* representates the caret */
    ul.nav li.dropdown::after{
        content: "";
        display: block;
        position: absolute;
        right: 2%;
        top: 49%;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid\9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

JohnnyDevNull commented Nov 2, 2016

Naja um das default bootstrap Handling nachbilden zu können wäre dies schon sehr hilfreich. Habe meinen Commit nochmal nachgebessert. Es ist dann damit auch ein "active" Item Handling möglich.
Das sieht dann so aus:

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <?php
                    echo $this->getMenu(1,'%c', [
                        'menus' => [
                            'ul-class-root' => 'nav navbar-nav',
                            'ul-class-child' => 'dropdown-menu',
                            'li-class-root' => '',
                            'li-class-root-active' => 'active',
                            'li-class-root-nesting' => 'dropdown',
                            'li-class-child' => '',
                            'allow-nesting' => true,
                        ],
                        'boxes' => [
                            'render' => false,
                        ],
                    ]);
                    ?>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

Und mit folgendem CSS hat man dann sofort ein Hover-Dropdown ohne noch viel zutun zu müssen:

    /* make it hovering */
    ul.nav li.dropdown:hover ul.dropdown-menu {
        display: block;
        margin-top: 0px;
    }

    /* representates the caret */
    ul.nav li.dropdown::after{
        content: "";
        display: block;
        position: absolute;
        right: 2%;
        top: 49%;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid\9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
@kveldscholten

This comment has been minimized.

Show comment
Hide comment
@kveldscholten

kveldscholten Nov 5, 2016

Member

Hab es nun mal grob getestet und macht die Nav führung mit Dropdown einfacher

Member

kveldscholten commented Nov 5, 2016

Hab es nun mal grob getestet und macht die Nav führung mit Dropdown einfacher

Mairu added a commit that referenced this pull request Nov 6, 2016

@Mairu

This comment has been minimized.

Show comment
Hide comment
@Mairu

Mairu Nov 6, 2016

Member

So hab die Inhalte dieses Pull Requests in 31fd27c verarbeitet. Allerdings mit 'li-class-active' statt 'li-class-root-active'.
Du müsstest dann also wohl eine Option beim einbinden anpassen.

Member

Mairu commented Nov 6, 2016

So hab die Inhalte dieses Pull Requests in 31fd27c verarbeitet. Allerdings mit 'li-class-active' statt 'li-class-root-active'.
Du müsstest dann also wohl eine Option beim einbinden anpassen.

@Mairu Mairu closed this Nov 6, 2016

@JohnnyDevNull

This comment has been minimized.

Show comment
Hide comment
@JohnnyDevNull

JohnnyDevNull Nov 7, 2016

Nice. Kein Problem.

JohnnyDevNull commented Nov 7, 2016

Nice. Kein Problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment