Я пытаюсь создать суб-навигацию в моей вертикальной панели.Вот краткое объяснение:
Я пытался использовать синтаксис для моего использования на курсах, но ссылка не активируется,
Мой Bootstrap:
<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">
Мой код CSS:
.side-menu-wrapper {
background: rgba(0,114,187,0.7);
padding: 40px 0 0 40px;
position: fixed;
top: 0;
right: 0;
height: 100%;
z-index: 2;
transition: 0.5s;
width: 250px;
font: 20px "Courier New", Courier, monospace;
box-sizing: border-box;
}
.side-menu-wrapper > ul{
list-style:none;
padding:0;
margin:0;
overflow-y: auto;
height:95%;
}
.side-menu-wrapper > ul > li > a {
display: block;
padding: 6px 4px 6px 4px;
color: white;
transition: 0.3s;
text-decoration: none;
}
.side-menu-wrapper > a.menu-close {
padding: 8px 0 4px 23px;
color: white;
display: block;
margin: -30px 0 -10px -20px;
font-size: 35px;
text-decoration: none;
}
.menu-overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
transition: opacity 1s;
}
.active-item{
list-style:none;
}
.item{
list-style:none;
color:white;
}
input{
width: 130px;
}
Мой код 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-код, чтобы убедиться, что у меня все хорошо.