Bootstrap - chowanie menu po kliknięciu w opcje w menu

Question

Pisze strone typu One Page w frameworku Bootstrap.

Chodzi o to żeby po klinięcu w opcje , menu się chowało.

Np

na stronie http://getbootstrap.com/examples/navbar-fixed-top/ , gdy zmiejszymy okno do rozmiarów kiedy pojawi się wysuwane menu. Klikamy na opcje Contact i menu się nie chowa , a mi chodzi o to żeby się chowało.

 

Z góry dziękuje za poświecony czas,

MlodyProgramista

 

Comments

Pisze strone typu One Page

Did you mean SPA? 

I nie, Bootstrap to tylko CSSowy Framework. To nie jest framework typu Ember.js, Angluar.js, Backbone.js (lib) czy też React.js (lib), ale tak, możesz używać go w połączeniu z w/w.

Answer 1

Jeżeli chodzi Ci, że podczas gdy mniejszamy okno to pewne elementy chowają się / zmniejszają to musisz poczytać o stronach Responsywnych.

Comments

Nie , chodzi mi o menu pojawiające się w mniejszej rozdzielczości s

Answer 2

Możesz do tegu użyć javascript'u, po zdarzeniu onClick() na dowolnym elemencie menu wywołuj funkcję, która ustawi display: none; dla menu :)

Pozdrawiam!

Answer 3

A ja myślę że szukasz coś takiego po prostu poczytaj poeksperymentuj ...

$().dropdown("toggle");

 

a tu znajdziesz więcej:

 http://www.w3schools.com/Bootstrap/bootstrap_ref_js_dropdown.asp

Answer 4

Requires JavaScript plugin

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

http://getbootstrap.com/javascript/#collapse

źródło: http://getbootstrap.com/components/#navbar-default

Czyli dodaj po prostu bootstrapowego javascripta do swojego pliku html i powinno zadziałać.

Dodatkowo moje rozwiązanie w react.js:

/**
 * Created by xandros15 on 2016-10-25.
 */
import React from "react";
import NavigationList from "../../components/Navigation/NavigationList";
import {NavIndex} from "../../components/Navigation/NavLink";
import {connect} from "react-redux";
import * as actions from "./actions";
import "./style.scss";

@connect(
    (state) => {
        return {
            collapsed: state.navigation.collapsed
        }
    },
    (dispatch) => {
        return {
            toggle: () => dispatch(actions.toggleNav())
        }
    }
)
export default class Navigation extends React.Component {
    render() {
        const {collapsed} = this.props;
        const navClass = collapsed ? "" : " collapse";
        const buttonClass = collapsed ? " open" : "";

        return (
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container">
                    <header class="navbar-header">
                        <h1><NavIndex class="navbar-brand" to="/">{this.props.title}</NavIndex></h1>
                        <button onClick={this.props.toggle}
                                type="button"
                                class={"navbar-toggle collapsed" + buttonClass}
                                aria-expanded="false"
                        >
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                        </button>
                    </header>
                    <div class={"navbar-collapse" + navClass}>
                        <NavigationList />
                    </div>
                </div>
            </nav>
        );
    }
}