1.自定义页面模板实现

主页面代码(home.html)

{% extends 'layout.html' %}     #引用模板
{% load static %}
{% block content %}
    <h3>欢迎登录</h3>
{% endblock %}

自定义内容

layout.html文件设置(模板)

{% load static %}
{% load menu %}     #导入menu.py文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static '/plugins/bootstrap2/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static '/plugins/font-awesome/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static '/css/commons.css' %}">
    <link rel="stylesheet" href="{% static '/css/menu.css' %}">
    <link rel="stylesheet" href="{% static '/css/nav.css' %}">
    {% block css %}{% endblock %}
</head>
<body>
<div class="pg-header">
    <div class="nav">
        <div class="logo-area left">
            <a href="{% url 'home' %}">
                <span style="font-size: 18px;">jk的管理平台 </span>
            </a>
        </div>
        <div class="right-menu right clearfix">

            <div class="user-info right">
                <a href="#" class="avatar" style="text-decoration: none;">
                    <span style="color: white;margin-right: 5px;">{{ request.user.name }}</span>
                    <img class="img-circle" style="width: 35px;height: 35px;" src="{% static 'images/default.png' %}">
                </a>

                <div class="more-info">
                    <a href="{% url 'logout' %}" class="more-item">注销</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pg-body">
    <div class="left-menu">
        <div class="menu-body">
            {% jk_menu request %} 
        </div>
    </div>
    <div class="right-body">
        {% if request.user.text_list %}
            <ol class="breadcrumb">
                {% for text in request.user.text_list %}
                    <li><a>{{ text }}</a></li>
                {% endfor %}
            </ol>
        {% endif %}
        <div style="padding: 20px;">
            {% block content %}{% endblock %}
        </div>
    </div>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.js' %}"></script>
<script src="{% static 'js/menu.js' %}"></script>   <!--通过hide 实现菜单的显示和隐藏-->
</body>
</html>``

menu.py内容

from django.template import Library
import copy
from django.conf import settings

register = Library()
@register.inclusion_tag('tag/menu.html')      #使用register.inclusion_tag实现自定义模板
def jk_menu(request):
    user_menu_list = copy.deepcopy(settings.MENU[request.user.role])
    return {"menu_list": user_menu_list}      #把数据传递到menu.html，并对页面进行渲染

menu.html内容(自定义想要的样式)

<div class="multi-menu">
    {% for item in menu_list %}
        <div class="item">
            <div class="title">
                <span class="icon-wrap"><i class="fa {{ item.icon }}"></i></span> {{ item.text }}
            </div>
            <div class="body">
                {% for child in item.children %}
                    <a class="" href="{{ child.url }}">{{ child.text }}</a>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>

通过bootstrap实现菜单隐藏和显示

meanu.js的代码实现

$(function () {
    $(".multi-menu .title").click(function () {
        $(this).next().toggleClass('hide');
    });
})

css代码

commons.css

.left{
    float: left;
}

.right{
    float: right;
}

.pg-header {
    /*height: 48px;*/
    /*background-color: #1b6d85;*/
}


.pg-body > .left-menu {
    background-color: #EAEDF1;
    position: absolute;
    left: 1px;
    top: 48px;
    bottom: 0;
    width: 220px;
    border: 1px solid #EAEDF1;
    overflow: auto;
}

.pg-body > .right-body {
    position: absolute;
    left: 225px;
    right: 0;
    top: 48px;
    bottom: 0;
    overflow: scroll;
    border: 1px solid #ddd;
    border-top: 0;
    font-size: 13px;
    min-width: 755px;
}



/* 自定义form-radio样式 */
ul.form-radio {
    padding-left: 0;
    list-style-type: none;
}

ul.form-radio li {
    display: inline-block;
    padding-right: 20px;
    padding-top: 7px;
}

ul.form-radio li label {
    font-weight: normal;
    font-size: 13px;
}

nav.css

.nav {
    min-width: 980px;
    height: 48px;
    background-color: #2F72AB;
    color: #ffffff;
    line-height: 48px;
    overflow: visible;
    font-size: 12px;
}

.nav .logo-area {
    width: 220px;
    overflow: hidden;
    height: 48px;
    text-align: center;
    /*background-color: #1c5a9c;*/
}

.nav .logo-area > a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
}

.nav .logo-area .logo {
    height: 37px;
    width: 37px;
    float: left;
    margin: 6px;
    margin-right: 10px;
}

.nav .left-menu {
    font-size: 13px;
}

.nav .left-menu .menu-item {
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
    position: relative;
    color: white;
    text-decoration: none;
}

.nav .left-menu .menu-item:hover {
    background-color: #337ab7;

}

.nav .left-menu .menu-item .more-info {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-color: #fff;
    color: #333;
    z-index: 1003;
}

.nav .left-menu .menu-item:hover .more-info {
    display: block;
}

.nav .left-menu .menu-item .more-info .more-item {
    display: block;
    min-width: 120px;
    padding: 0 15px;
    line-height: 35px;
    text-decoration: none;
    color: #000000;

}

.nav .left-menu .menu-item .more-info .more-item:hover {
    background-color: #f1f0f0;
}

.nav .right-menu .user-menu {
    padding: 0 8px;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.nav .right-menu .user-menu:hover {
    background-color: #337ab7;

}

.nav .right-menu .user-info {
    padding: 0 30px 0 10px;
    height: 48px;
    position: relative;
}

.nav .right-menu .user-info:hover .avatar {
    background-color: #337ab7;
}

.nav .right-menu .user-info .avatar {
    display: inline-block;
    padding: 0 10px;
    height: 48px;
}

.nav .right-menu .user-info .avatar img {
    /* margin-top: 2px;*/
}

.nav .right-menu .user-info .more-info {
    display: none;
    position: absolute;
    top: 48px;
    right: 20px;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-color: #fff;
    color: #333;
    z-index: 1002;
}

.nav .right-menu .user-info:hover .more-info {
    display: block;
}

.nav .right-menu .user-info .more-info .more-item {
    display: block;
    min-width: 160px;
    padding: 0 15px;
    line-height: 35px;
    text-decoration: none;
    color: #000000;

}

.nav .right-menu .user-info .more-info .more-item:hover {
    background-color: #f1f0f0;
}

menu.css


.multi-menu .item {
    background-color: white;
}

.multi-menu .item > .title {
    padding: 10px 5px;
    border-bottom: 1px solid #dddddd;
    cursor: pointer;
    color: #333;
    display: block;
    background: #efefef;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));
    background: -ms-linear-gradient(bottom, #efefef, #fafafa);
    background: -o-linear-gradient(bottom, #efefef, #fafafa);
    filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efefef')";
    box-shadow: inset 0 1px 1px white;
}

.multi-menu .item > .body {
    border-bottom: 1px solid #dddddd;
}

.multi-menu .item > .body a {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
    border-left: 2px solid transparent;
    font-size: 13px;

}

.multi-menu .item > .body a:hover {
    border-left: 2px solid #2F72AB;
}

.multi-menu .item > .body a.active {
    border-left: 2px solid #2F72AB;
}

标签：right,自定义,color,menu,bootstrap,django,item,nav,left
From： https://www.cnblogs.com/whl2024/p/18160540

django自定义构建模板，通过bootstrap实现菜单隐藏和显示

1.自定义页面模板实现

通过bootstrap实现菜单隐藏和显示

css代码

相关文章

赞助商

阅读排行