Css 如何在垂直导航栏中创建子导航
我正在尝试在我的垂直条中创建一个子导航。下面是一个简短的解释: 我已经尝试使用我将要用于课程的语法,但链接无法激活 我的引导程序:Css 如何在垂直导航栏中创建子导航,css,bootstrap-4,Css,Bootstrap 4,我正在尝试在我的垂直条中创建一个子导航。下面是一个简短的解释: 我已经尝试使用我将要用于课程的语法,但链接无法激活 我的引导程序: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel = "stylesheet" href = "Stylesheet.css"> <script src="https://ajax.googleapis
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel = "stylesheet" href = "Stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src = "script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
我的HTML代码:
<div class="menu-overlay "></div>
<div id="main-menu" class="side-menu-wrapper">
<a href="#" class="menu-close">×</a>
<ul>
<li>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.."
name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">
Home
</a>
</li>
<li>
<a href="#sub-menu" class="active" data-
toggle="collapse" data-parent="#main-menu">
About
<span class="ml-2" style="font-size: 12px;">
▼
</span>
</a>
<div class="collapse" id="sub-menu">
<ul>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Introduction</a>
</li>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Mission</a>
</li>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Vision</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#sub-menu1" class="active" data-
toggle="collapse" data-parent="#main-menu">
Courses
<span class="ml-2" style="font-size: 12px;">
▼
</span>
</a>
<div class="collapse" id="sub-menu1">
<ul>
<li href="#sub-menu1.1" class="active-item"
data-toggle="collapse" data-parent="#main-
menu">
<a>
Diploma in Information Technology
</a>
<ul class="collapse" id="sub-menu1.1">
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
Prof.Diploma in IT Support(Hardware)
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>Prof.Diploma in Software
Engineering (Programming)
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
Diploma in Videogame Programming
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
View All
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Flickr</a>
</li>
</ul>
</div>
-
-
-
-
-
-
-
-
所以,正如你们所看到的,我正在尝试为我的课程链接创建一个子导航,但我不知道。请检查我的HTML代码,以确保我一切正常。使用
数据目标
以要折叠的div
为目标,而不是数据父项
,我已将sub-menu1重命名为sub-menu2,以便可以清楚地区分它们
有关折叠组件如何工作的更多信息,请参阅
下面的工作片段:
.side菜单包装器{
背景:rgba(0114187,0.7);
填充:40px 0 40px;
位置:固定;
排名:0;
右:0;
身高:100%;
z指数:2;
过渡:0.5s;
宽度:250px;
字体:20px“Courier New”,Courier,monospace;
框大小:边框框;
}
.侧菜单包装器>ul{
列表样式:无;
填充:0;
保证金:0;
溢出y:自动;
身高:95%;
}
.侧菜单包装器>ul>li>a{
显示:块;
填充:6px 4px 6px 4px;
颜色:白色;
过渡:0.3s;
文字装饰:无;
}
.side菜单包装器>a.menu-close{
填充:8px 0 4px 23px;
颜色:白色;
显示:块;
利润率:-30px 0-10px-20px;
字体大小:35px;
文字装饰:无;
}
.菜单覆盖{
身高:100%;
宽度:0;
位置:固定;
z指数:1;
排名:0;
左:0;
背景色:rgba(0,0,0,7);
溢出y:自动;
溢出x:隐藏;
文本对齐:居中;
不透明度:0;
过渡:不透明度1s;
}
.活动项目{
列表样式:无;
}
.项目{
列表样式:无;
颜色:白色;
}
输入{
宽度:130px;
}
-
-
-
-
-
-
-
-
使用数据目标
以要折叠的div
为目标,而不是数据父级
,我已将sub-menu1重命名为sub-menu2,以便可以清楚地区分它们
有关折叠组件如何工作的更多信息,请参阅
下面的工作片段:
.side菜单包装器{
背景:rgba(0114187,0.7);
填充:40px 0 40px;
位置:固定;
排名:0;
右:0;
身高:100%;
z指数:2;
过渡:0.5s;
宽度:250px;
字体:20px“Courier New”,Courier,monospace;
框大小:边框框;
}
.侧菜单包装器>ul{
列表样式:无;
填充:0;
保证金:0;
溢出y:自动;
身高:95%;
}
.侧菜单包装器>ul>li>a{
显示:块;
填充:6px 4px 6px 4px;
颜色:白色;
过渡:0.3s;
文字装饰:无;
}
.side菜单包装器>a.menu-close{
填充:8px 0 4px 23px;
颜色:白色;
显示:块;
利润率:-30px 0-10px-20px;
字体大小:35px;
文字装饰:无;
}
.菜单覆盖{
身高:100%;
宽度:0;
位置:固定;
z指数:1;
排名:0;
左:0;
背景色:rgba(0,0,0,7);
溢出y:自动;
溢出x:隐藏;
文本对齐:居中;
不透明度:0;
过渡:不透明度1s;
}
.活动项目{
列表样式:无;
}
.项目{
列表样式:无;
颜色:白色;
}
输入{
宽度:130px;
}
<div class="menu-overlay "></div>
<div id="main-menu" class="side-menu-wrapper">
<a href="#" class="menu-close">×</a>
<ul>
<li>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.."
name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">
Home
</a>
</li>
<li>
<a href="#sub-menu" class="active" data-
toggle="collapse" data-parent="#main-menu">
About
<span class="ml-2" style="font-size: 12px;">
▼
</span>
</a>
<div class="collapse" id="sub-menu">
<ul>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Introduction</a>
</li>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Mission</a>
</li>
<li class = "item" href="#" target="_blank"
rel="nofollow">
<a >Vision</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#sub-menu1" class="active" data-
toggle="collapse" data-parent="#main-menu">
Courses
<span class="ml-2" style="font-size: 12px;">
▼
</span>
</a>
<div class="collapse" id="sub-menu1">
<ul>
<li href="#sub-menu1.1" class="active-item"
data-toggle="collapse" data-parent="#main-
menu">
<a>
Diploma in Information Technology
</a>
<ul class="collapse" id="sub-menu1.1">
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
Prof.Diploma in IT Support(Hardware)
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>Prof.Diploma in Software
Engineering (Programming)
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
Diploma in Videogame Programming
</a>
</li>
<li class = "item" href="#"
target="_blank" rel="nofollow">
<a>
View All
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#" target="_blank" rel="nofollow">Flickr</a>
</li>
</ul>
</div>