django 二级导航栏怎么实现
时间: 2023-11-17 08:04:55 浏览: 112
二级导航栏
在 Django 中实现二级导航栏有多种方法,以下是其中一种常见的实现方法:
1. 在主导航栏中添加一个下拉菜单,用于显示二级导航栏的选项。
2. 在模板文件中定义一个包含主导航栏和二级导航栏的 HTML 结构,二级导航栏的选项可以使用 Django 的 URL 模板标签或手动添加链接。
3. 在视图函数中定义一个上下文变量,用于传递给模板文件显示二级导航栏的选项。
4. 在主导航栏中添加一个 JavaScript 代码段,用于在鼠标悬停在下拉菜单上时显示二级导航栏的选项。
具体实现步骤如下:
1. 在主导航栏中添加一个下拉菜单,代码如下:
```html
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
```
2. 在模板文件中定义一个包含主导航栏和二级导航栏的 HTML 结构,代码如下:
```html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
{% for product in products %}
<li><a href="{{ product.url }}">{{ product.name }}</a></li>
{% endfor %}
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
```
3. 在视图函数中定义一个上下文变量,用于传递给模板文件显示二级导航栏的选项,代码如下:
```python
from django.shortcuts import render
def product_list(request):
products = [
{'name': 'Product 1', 'url': '/product-1/'},
{'name': 'Product 2', 'url': '/product-2/'},
{'name': 'Product 3', 'url': '/product-3/'},
]
context = {'products': products}
return render(request, 'product_list.html', context)
```
4. 在主导航栏中添加一个 JavaScript 代码段,用于在鼠标悬停在下拉菜单上时显示二级导航栏的选项,代码如下:
```javascript
var dropdowns = document.querySelectorAll('.dropdown');
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener('mouseenter', function() {
this.querySelector('.dropdown-menu').classList.add('show');
});
dropdowns[i].addEventListener('mouseleave', function() {
this.querySelector('.dropdown-menu').classList.remove('show');
});
}
```
以上就是实现 Django 二级导航栏的一种常见方法。
阅读全文