Using JQuery to Customize Navigation Menu Targeting

Question

Using JQuery to Customize Navigation Menu Targeting

On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with all the code included.

Here is what I have accomplished so far:

HTML:

<div id="ImageMain">

<ul id="nav">
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
</ul>

<a href="#" id="homeb">Shop Now</a>

</div>

<script>    
$(document).ready(function() {
    $("#navm").fadeIn(500);
});
$(document).ready(function() {
    $("#homeb").fadeIn(500);
});
</script>

CSS:

#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}

#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}

#homeinfo {
padding-bottom: 15px;
}

#brand {
float: left;
padding: 100px;
}

#Pronto {
width: 150px;
}

#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}

#nav #navm a {
transition-duration: 1s;
}

#brand a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm {
margin-right: auto;
margin-left: auto;
display: none;
}

#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}

#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}

#homeb:hover {
opacity: .3;
transition-duration: 1s;
}

#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}

h3 {
color: white;
}

#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}

#nav li {
display: inline-block;
padding: 7px;
}

#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}

https://jsfiddle.net/tux41Lvp/

javascript jquery html css

Answer 1

Answer №1

To make the button anchor work properly, you must enclose it in a parent div:

<div id="link">
    <a href="#" id="homeb">Shop Now</a>
</div>

Next, you need to ensure that the target elements are hidden (make sure to target their parents):

#nav{ display:none;}
#link{ display:none;}

Refer to the JavaScript code snippet for implementation details:

$(document).ready(function() {
            $("#nav").fadeIn(500);
            $("#link").fadeIn(1000);
        });

Additionally, here is some CSS code to style the different elements on the page:

#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
/* Other styles */
}

#brand {
/* Styling for brand element */
}

/* More CSS styling rules */

#wrapper a {
/* Styling for wrapper anchor */
}

h3 {
color: white;
}

Finally, include the necessary HTML markup with the script tag at the end:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">

<ul id="nav">
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>

  <div id="link">
    <a href="#" id="homeb">Shop Now</a>
  </div>


</div>

Answer 2

To make the button anchor work properly, you must enclose it in a parent div:

<div id="link">
    <a href="#" id="homeb">Shop Now</a>
</div>

Next, you need to ensure that the target elements are hidden (make sure to target their parents):

#nav{ display:none;}
#link{ display:none;}

Refer to the JavaScript code snippet for implementation details:

$(document).ready(function() {
            $("#nav").fadeIn(500);
            $("#link").fadeIn(1000);
        });

Additionally, here is some CSS code to style the different elements on the page:

#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
/* Other styles */
}

#brand {
/* Styling for brand element */
}

/* More CSS styling rules */

#wrapper a {
/* Styling for wrapper anchor */
}

h3 {
color: white;
}

Finally, include the necessary HTML markup with the script tag at the end:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">

<ul id="nav">
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>

  <div id="link">
    <a href="#" id="homeb">Shop Now</a>
  </div>


</div>

Answer 3

Answer №2

Ensure to conceal the items first before revealing them, as having two distinct items with similar IDs is not allowed, hence I adjusted the selector.

$("#nav a, #homeb").hide();
$(document).ready(function() {
    $("#nav a").fadeIn(1000);
    $("#homeb").fadeIn(1000);
});

#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}

#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}

#homeinfo {
padding-bottom: 15px;
}

#brand {
float: left;
padding: 100px;
}

#Pronto {
width: 150px;
}

#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}

#nav #navm a {
transition-duration: 1s;
}

#brand a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm {
margin-right: auto;
margin-left: auto;
display: none;
}

#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}

#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}

#homeb:hover {
opacity: .3;
transition-duration: 1s;
}

#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}

h3 {
color: white;
}

#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}

#nav li {
display: inline-block;
padding: 7px;
}

#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">

<ul id="nav">
    <li><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Contact</a></li>
</ul>

<a href="#" id="homeb">Shop Now</a>

</div>

Answer 4

Ensure to conceal the items first before revealing them, as having two distinct items with similar IDs is not allowed, hence I adjusted the selector.

$("#nav a, #homeb").hide();
$(document).ready(function() {
    $("#nav a").fadeIn(1000);
    $("#homeb").fadeIn(1000);
});

#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}

#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}

#homeinfo {
padding-bottom: 15px;
}

#brand {
float: left;
padding: 100px;
}

#Pronto {
width: 150px;
}

#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}

#nav #navm a {
transition-duration: 1s;
}

#brand a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm a:hover {
opacity: .3;
transition-duration: 1s;
}

#navm {
margin-right: auto;
margin-left: auto;
display: none;
}

#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}

#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}

#homeb:hover {
opacity: .3;
transition-duration: 1s;
}

#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}

h3 {
color: white;
}

#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}

#nav li {
display: inline-block;
padding: 7px;
}

#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">

<ul id="nav">
    <li><a href="#">Men</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Contact</a></li>
</ul>

<a href="#" id="homeb">Shop Now</a>

</div>

Using JQuery to Customize Navigation Menu Targeting

Answer №1

Answer №2

Similar questions

Obtain the model value using Yii jQuery and then proceed to submit the form

Show a stylish container when the server encounters an HTTP error with status code 500

iOS Simulator offers a range of both offline and online events for testing purposes

Using JQuery, retrieve all field values on click, excluding the value of the closest field in each row

Is it possible to achieve a callback with jQuery after loading?

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

When there is an absence of data, the jQuery datatable mysteriously van

Executing database queries in a synchronous manner in JavaScript

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Oops! The type in React.jsx is not valid - it should be a string for built-in components. You may want to consider converting your class component to a

Browsing through a JSON document

Iterate through the list retrieved from the backend

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

i18next backend failing to load files

Error occurred while looking for user by ID in the everyauth

Learn how to create a PHP activity feed that functions like Facebook, and discover the best methods for converting JSON responses into HTML