Html 单击特定菜单项时，顶部导航栏会移动_Html_Css_Django_Django Templates

Html 单击特定菜单项时，顶部导航栏会移动

html css django

Html 单击特定菜单项时，顶部导航栏会移动,html,css,django,django-templates,Html,Css,Django,Django Templates,以下是我开发的应用程序：当我点击菜单中的Search时，导航栏向下移动，我找不到问题所在。我希望菜单总是固定在页面顶部。感谢您的帮助 \uu base.html: {% load staticfiles %} <!DOCTYPE html> <html lang="en" class="no-js"> <head> {% block meta_tags %}{% endblock meta

以下是我开发的应用程序：

当我点击菜单中的

Search

时，导航栏向下移动，我找不到问题所在。我希望菜单总是固定在页面顶部。感谢您的帮助

\uu base.html:

    {% load staticfiles %}

    <!DOCTYPE html>

    <html lang="en" class="no-js">
        <head>
            {% block meta_tags %}{% endblock meta_tags%}

            <title>
                {% block title %}Azeribo Tracking{% endblock title %} 
            </title>

            {% block stylesheets %}         {% endblock %}      
            {% block javascript %}          {% endblock javascript %}       
            {% block extra_head %}          {% endblock %}
        </head>

        <body>
            <header class="topnavbar">
                {% include 'aztracker/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        </body>
    </html>

搜索表单.css

* {border:1px black solid;}
.topnavbar {
    background-color: rgba(0,100,150,0.6);/*rgba(0,255,150,0.6);/*#3EDC99*/
}

html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

body {
    background-color: #3498db; 
}

.nav {
    width: 550px;
    margin: 0 auto 0 auto;
    text-align: center;
}

/* Navigation */

.nav {
    font-family: Verdana, Georgia, Arial, sans-serif;
    font-size: 14px;
}

.nav-items {
    padding: 0;
    list-style: none;
}

/* color of menu links
span    {

    color:yellow;
}
*/

.nav-item {
    display: inline-block;
    margin-right: 25px;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-link,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active,
.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    display: block;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    color:#fff;
}

.nav-link ,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active {
    color: #fff;
    font-weight: bold;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:hover::before {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
}

.dropdown {
    position: relative;
}

.dropdown .nav-link {
    padding-right: 15px;
    height: 17px;
    line-height: 17px;
}

.dropdown .nav-link::after {
    content: "";
    position:absolute;
    top: 6px;
    right: 0;
    border: 5px solid transparent;
    border-top-color: #fff; /*small triangle showing drop down menu*/
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    width: 200px;
    margin-left: -100px;
    background: #fff;
    border-radius: 3px;
    line-height: 1.46667;
    margin-top: -5px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity:0;
    -webkit-transform: translate(0, 0) scale(.85);
    transform: translate(0, 0)scale(.85);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.submenu::after, 
.submenu::before {
    content: ""; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    height: 0;
}

.submenu::after {
    border-bottom-color: #fff;
}

.submenu::before {
    margin-left: -13px;
    border: 13px solid transparent;
    border-bottom-color: rgba(0,0,0,.1);
    -webkit-filter:blur(1px);
    filter:blur(1px);
}

.submenu-items {
    list-style: none;
    padding: 10px 0;
}

.submenu-item {
    display: block;
    text-align: left;
}

.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    color: #3498db;
    padding: 10px 20px;
}

.submenu-link:hover {
    text-decoration: underline;
}

.submenu-seperator {
    height: 0;
    margin: 12px 10px;
    border-top: 1px solid #eee;
}

.show-submenu .submenu {
    opacity: 1;
    -webkit-transform: translate(0, 25px) scale(1);
    transform: translate(0, 25px) scale(1);
    pointer-events: auto;
}

.submenu-link{
    color:red;
}

* {border:1px black solid;}

在所有子页面（包括搜索）上，尝试将以下内容添加到CSS：

body {
margin: auto;
}

在html中似乎有一个胭脂Unicode字符。单击“搜索”后检查页面源将显示Unicode字符。此字符为“零宽度不间断空格”

它将不会在文本编辑器中显示，因为它会解析字符。您可以尝试在记事本或不懂Unicode的文本编辑器中打开代码，然后尝试从中删除它

还值得指出的是，您的内容显示在您的标记中

从RHSeeger的回答中找出了这个角色

希望这有帮助

您在某个时候破坏了您的HTML，我可以看到您的模板构造中存在一些问题

第一名：

    {% load staticfiles %}

    <!DOCTYPE html>

    <html lang="en" class="no-js">
        <head>
            {% block meta_tags %}{% endblock meta_tags%}

            <title>
                {% block title %}Azeribo Tracking{% endblock title %} 
            </title>

            {% block stylesheets %}         {% endblock %}      
            {% block javascript %}          {% endblock javascript %}       
            {% block extra_head %}          {% endblock %}
        </head>

        <body>
            <header class="topnavbar">
                {% include 'aztracker/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        </body>
    </html>

您在body标签中包含一个head标签（_topnavbar.html）

这应该在“extra\u head”块中，如下（\u topnavbar.html）：

{%block extra_head%}
{%endblock%}

秒：您正在body标记内添加额外的body标记（search_form.html）：

{%block content%}
{%block main_col%}
{%csrf_令牌%}
搜寻
{%endblock main_col%}
{%endblock内容%}

必须删除该body标记

第三：

您以错误的方式添加脚本（\u topnavbar.html）：

您可以这样添加它：

<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>

也许你有更多的错误，你应该逐行检查你的代码，找出所有其他的问题

我希望这个答案对您有用，祝您愉快。

为什么在内容块中使用主列块？为什么在模板中使用“body”标记？（您已经将其放在了_base.html）非常感谢您查看并指出错误。我做了所有的更改，但第三个更改在检查呈现页面时显示错误。这是错误

127.0.0.1/：26 GEThttp://127.0.0.1:8000/static/css/_topnavbar.js net：：ERR_ABORTED

js文件可以工作，但我不知道为什么chrome会显示这个错误！没关系，我找到了。css必须是地址中的js。js文件在js文件夹中，不是cssI我很高兴我的答案能帮助你，如果它解决了你的问题，你可以把它设置为正确的答案，祝你愉快。我给了你10分。事实上，另一个人给出的答案解决了我问题中的问题，但你的意见也帮了我很大的忙，我不知道我还能如何回报你。如果你有什么建议，请告诉我。没关系，我不知道另一个答案是正确的。我只是用记事本+++

Encoding>encodein UTF-8用UTF-8编码，然后保存文件，这样隐藏的字符就会消失。
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
    <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>

{% block extra_head %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <body>
            <section class="search_section">
                <form  method="POST" action="/search/">         
                    {% csrf_token %}
                    <input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">             
                    <button id="search_btn">Search</button>
                </form>
            </section>
        </body>         
    {% endblock main_col %} 
{% endblock content %}

<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">

<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>