1
ホバー上で開くようにドロップダウンメニューと第2レベルメニューを取得する方法。ナビゲーションバーはクリック時にドロップダウン表示され、ホバー上でドロップダウンするにはどのような変更を行う必要があります。私はw3schools.comからナビゲーションバーのコードを取得しました。それは正常に動作しています。しかし、私はa.hoverまたはdropdown.hoverを内部CSSに追加する必要があります。それでどこに追加しますか？ホバーメニューとサブメニューのドロップダウンを取得する - ブートストラップ3.3.7
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>UPSC Fever</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#footer").load("footer.html");
$('li.dropdown-submenu').on('click', function (event) {
event.stopPropagation();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function() {
$('.dropdown-toggle').dropdown()
});
</script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu .open > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu .open > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
visibility: hidden;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #3399ff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
background-color: #ffffff;
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<meta name="Slurp" content="noindex">
</head>
<body>
<!-- <div id="mySidenav" class="sidenav" >
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>-->
<div class="jumbotron"> <img src="http://upscfever.com/upsc-fever/assets/images/logo.JPG" alt="LOGO - UPSC Fever" class="img-responsive"
>
<div class="container text-center">
<p style="text-align: center;">INDIA'S #1 SITE FOR COMPETITIVE EXAM
PREPARATION</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid" >
<div class="navbar-header"> <button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div>
<!--side navigator--> <button type="button" class="btn btn-default btn-sm" onclick="openNav()" style="visibility: hidden;">
<span class="glyphicon glyphicon-plus"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
UGC - NET <span class="caret"></span></a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/how-to-study/en-how2-ugc.html"><span class="glyphicon glyphicon-education"></span> Studyplan</a>
</li><li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/syllabus/en-syllabus-ugc.html"><span class="glyphicon glyphicon-book"></span> Syllabus</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Paper - I</a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/apti/apti-homepage.html"><span class="glyphicon glyphicon-hourglass"></span> General Aptitude - Teaching Research</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">General Administration</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/environment/en-env-homepage.html">Environment</a>
</li>
</ul>
</li> <li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/history/en-history-homepage.html"><span class="glyphicon glyphicon-header"></span> History</a>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Indian Culture </a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/culture/en-cul-homepage">Ancient Indian Culture</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/history/en-history-homepage.html"><span class="glyphicon glyphicon-header"></span> Ancient History</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/geog/geog-homepage.html"><span class="glyphicon glyphicon-globe"></span> Geography</a>
</li>
<li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/economy/economy-homepage.html"><span class="glyphicon glyphicon-piggy-bank"></span> Economics</a>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Public Administration
</a>
<ul class="dropdown-menu">
<li>
<a href="http://upscfever.com/upsc-fever/en/pubad/pubad-homepage.html">Indian Public Administration</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">Indian Polity</a>
</li>
</ul>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Political Science
</a>
<ul class="dropdown-menu">
<li>
<a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">Political Theory</a>
</li>
<li>
<a href="http://upscfever.com/upsc-fever/en/pubad/pubad-homepage.html"><span class="glyphicon glyphicon-user"></span> Indian Public Administration</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>