In my project specifcation, I was assigned to do a full website and the last part of it is confusing.
d) Use JQuery to make it much easier to use JavaScript on your website. Add the hide/show of the panel and other JQuery events and effects such as fade in/out, slide up/down.
e) Use one of the most important properties of jQuery that comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
How would I be able to implement parts d and e in my code? what are examples of these events especially DOM methods. and can I implement these in a drop down list? here's a sample code.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
I haven't tried anything much, I keep searching in w3schools but its no help.
well... to start with your question is a bit ambiguous, if I understand correctly you have no idea what JQuery is about. You can find that out on their official website at JQuery
JQuery is... simply put a simpler way to write JavaScript, it has some stuff called methods and what they do is help you write a small amount of code in place of many lines of JavaScript codes that produce the exact same result.
Let's use this part of your code to solve your problem d)
$('.dropbtn').click(function() {
// $('.dropdown-content').show(); // Shows your dropdown menu
// $('.dropdown-content').hide(); // Hides your dropdown menu
$('.dropdown-content').toggle(); // Hides/Shows your dropdown menu (inverts the state of visibility)
});.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<!-- This line brings in JQuery into your application via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Now, the e) problem This must be talking about the $ operator used in the code sample it greatly reduces the amount of work required to access DOM (Document Object Model) elements in JavaScript
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments