django 实现鼠标悬浮式下拉菜单

Django模型层(models.py)

from django.db import models
class Menu(models.Model)  :
    title = models.CharField(max_length=64, verbose_name='菜单')
    option  = models.ForeignKey(
        'self',
        on_delete=models.SET_NULL,
        related_name='sub',  # 链表查询时代替表的名称，防止一个表有多个ForeignKey()但是都是调用表名查询
        null=True,
        blank=True,
        verbose_name='上级菜单'
    )
    class Meta:
        db_table = 'Menu'  # 定义数据库表的名称
        verbose_name_plural = '菜单表'  # 定义admin管理页面中表的名称
    def __str__(self):
        return  self.title

Django视图层(veiws.py)

from app01.models import Menu
def menus():
    first_level_menu = Menu.objects.filter(option_id=None)
    menu = []
    for i in first_level_menu:
        second_menu = []
        secondary_menu = Menu.objects.filter(option_id=i.id)
        for j in secondary_menu:
            second_menu.append('<li><a href="">%s</a></li>'%j.title)
        menu.append({'<span class="option">%s</span>'%i.title:second_menu})
    return menu
def indexs(request):
    meun = menus()
    return render(request, 'index.html', locals())

Django路由层（urls.py）

from app01 import veiws
urlpatterns = [
    re_path('index/', views.indexs),
]

Django模板层（index.html）

<link rel="stylesheet" href="{% static 'css/index.css' %}">
<div class='nav-left'>
{% for foo in meun %}
　　<div class="options">
　　{% for k,v in foo.items %}
　　　　{{ k|safe }}
　　　　<ul>
　　　　　　{% for i in v %}
　　　　　　　　{{i|safe}}
　　　　　　{% endfor %}
　　　　</ul>
　　{% endfor %}
　　</div>
{% endfor %}
</div>

css样式(index.css)

        .nav-left{
            width: 12%;
            height = auto
        }
        ul{
            padding: 0;
            margin: 0;
        }
        .nav-left{
            position: absolute;
            top: 90px;
            margin-top: 4px;
        }
       .nav-left .options{
            height: auto;
            width: 100%;
        }
        .nav-left .options span[class^=option]{
            border-left: 10px #8c8d8f solid;
            display: inline-block;
            border-bottom: 1px #ffffff solid;
            width: 100%;
            height: 48px;
            line-height: 48px;
            padding-left: 20px;
            background-color: #8c8d8f;
            font-weight: 900;
            text-indent: 15px;
            letter-spacing: 2px;
        }

        .nav-left .options:hover .option{
            border-left: 10px #525453 solid;
        }
        .nav-left .options:hover ul{
            display: inline-block;
        }
        .nav-left div[class^=options] ul{
            display: none;
        }
        .nav-left div[class^=options] ul li{
            display: inline-block;
            letter-spacing: 2px;
            border-bottom: 1px #ffffff solid;
            padding-left: 50px;
            line-height: 28px;
            width: 100%;
            height: 28px;
            list-style: none;
            font-weight: 400;
            border-left: 10px #ffffff solid;
        }
        .nav-left div[class^=options] ul li:hover{
            border-left: 10px #1e1e80 solid;
            background-color: #d4d4d4;
        }
    

 

显示效果：