Question

嘿伙计我，我有一个移动汉堡下拉菜单，在该菜单上我有一些页面链接，他们指向给定的div。我想要实现的是每个选定的链接及其相应的div直接停在打开的下拉菜单下。

聚苯乙烯。我正在Symfony2中编写一个应用程序，因为我正在使用twig引擎做我的前端，所以代码可能看起来很尴尬。

navigation.html.twig：

{% block navigation %}
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="navbar-header">
                <button type="button" id="nav" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand visible-xs" href="home">
                    <img class="navbar-brand__logo" src="img/nav/36526.png">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
    </nav
{% endblock %}

home.html.twig：

{% extends 'base.html.twig' %}

{% block banner %}
        <img class="banner" src="img/home/background.png" >
{% endblock %}

{% block body %}
    <section id="home">
        <div class="main__about">
            <h4 class="main__title">{ About }</h4>
        </div>
    </section>

    <section id="skills">
        <div class="main__skills">
            <h4 class="main__title">{ Skills }</h4>
        </div>
    </section>

    <section id="portfolio">
        <div class="main__portfolio">
            <h4 class="main__title">{ Portfolio }</h4>
        </div>
    </section>

    <section id="blog">
        <div class="main__blog">
            <h4 class="main__title">{ Blog }</h4>
        </div>
    </section>

    <section id="contact">
        <div class="main__contact">
            <h4 class="main__title">{ Contact }</h4>
        </div>
    </section>
{% endblock %}

base.html.twig：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Test Application{% endblock %}</title>
    {% block bower %}
        <script src="{{ asset('js/javascript.js') }}"></script>
        <link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
    {% endblock %}
</head>
<body>

<div>
    {% block navigation %}
        {% include 'pages/navigation.html.twig' %}
    {% endblock %}
</div>
<div class="banner">
    {% block banner %}
    {% endblock %}
</div>

<div class="container">
    <div class="main">
        {% block body %}
        {% endblock %}
    </div>
</div>

</body>
</html>

Css，bootstrap不是我的优势之一，请你帮我解决这个问题：）

在切换汉堡菜单下的树枝模板快照div部分

0 个答案: