django自定義構建模板，透過bootstrap實現選單隱藏和顯示

海上码农發表於2024-04-26
Djangoboot

實現後的介面
image
image

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;
}

相關文章