Is there a way to adjust my navbar's height depending on the presence of a focused link?

Question

Is there a way to adjust my navbar's height depending on the presence of a focused link?

Currently, I am utilizing React and JavaScript for styling on my website. One feature I have implemented is a skip link in the navigation bar that allows users to jump further down the page with a simple click. The challenge I'm facing is that this skip link only becomes noticeable when the tab key is pressed. It is positioned above the site logo in the navbar and requires more space when it appears. To address this, I aim to increase the height of the navbar when the link is visible. My approach involves using a boolean variable named linkHasFocus for conditional CSS styling. Additionally, I have created a function called checkFocus:

const TopNavbar = styled.div`
      ...
      height: ${props => (props.linkHasFocus ? '9rem' : '4rem')}; 
      ... 
`;

Here is an outline of the checkFocus function:

const checkFocus = () => {
      const elem = document.getElementById('skip-link');
      if (elem === document.activeElement) {
        this.linkHasFocus = true;
      }
      this.linkHasFocus = false;
      return this.linkHasFocus;    
};

I pass the checkFocus function to my TopNavbar component (the parent of the skip link component) in the return statement like this:

<TopNavbar linkHasFocus={checkFocus}>

However, I have encountered an issue where the checkFocus function does not update the linkHasFocus variable correctly. My grasp of props and JavaScript concepts may be lacking, so I apologize if there are glaring errors in my implementation.

javascript css reactjs jsx

Answer 1

Answer №1

After finding a helpful navbar example on w3schools.com (I recommend checking out their Top Navigation tutorial), I decided to enhance it with 3 additional examples using JavaScript and CSS.
By utilizing the .classList property, we can dynamically add, remove, or toggle classes on elements. This allows us to apply style changes (such as adjusting height and transitions for the top navigation) based on specific user actions.

Below are the 3 examples showcased in JavaScript:

Expanding the Navbar when pressing the TAB key (keyCode == 9), and contracting it when the key is released;
Toggling the expansion when the SPACE key is pressed (keyCode == 32);
Expanding the Navbar when hovering over the Skip section, and shrinking it upon exiting the area.

// Example 1: Expand the navbar while tab key is pressed
document.body.addEventListener("keydown", function(e) {
  if(e.keyCode == 9) {
    document.getElementById("myTopnav").classList.add("expand");
  }
});
document.body.addEventListener("keyup", function(e) {
  if(e.keyCode == 9) {
    document.getElementById("myTopnav").classList.remove("expand");
  }
});

// Example 2: Toggle navbar expand with space key
document.body.addEventListener("keydown", function(e) {
  if(e.keyCode == 32) {
    document.getElementById("myTopnav").classList.toggle("expand");
  }
});

// Example 3: Expand the navbar while the mouse is over
document.getElementById("skip").addEventListener("mouseover", function(e) {
    document.getElementById("myTopnav").classList.add("expand");
});
document.getElementById("skip").addEventListener("mouseout", function(e) {
    document.getElementById("myTopnav").classList.remove("expand");
});

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.TopNavbar {
  height: 4rem;
  overflow: hidden;
  background-color: #333;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
#myTopnav.expand {
  height: 9rem;
  transition: height 300ms;
}

.TopNavbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;  
  font-size: 17px;
}

.TopNavbar a:hover {
  background-color: #ddd;
  color: black;
}

.TopNavbar a.active {
  background-color: #04AA6D;
  color: white;
}

.pageContent {
  padding: 14px 16px;
}

li {
  margin: 10px 0;
}

<html>
<head>
</head>
<body>
  <div class="TopNavbar" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a id="skip" href="#skip">Skip</a>
  </div>

  <div class="pageContent">
    <h3>Navbar extension example</h3>
    <ul>
      <li>Example 1: extend the navbar while <code>TAB</code> key is pressed.</li>
      <li>Example 2: press <code>SPACE</code> key to toggle the navbar extend.</li>
      <li>Example 3: extend the navbar while the mouse is over "Skip" option.</li>
    </ul>
  </div>
</body>
</html>

If this isn't what you're looking for, consider exploring CSS Selectors for more options that may better suit your needs.

Answer 2

After finding a helpful navbar example on w3schools.com (I recommend checking out their Top Navigation tutorial), I decided to enhance it with 3 additional examples using JavaScript and CSS.
By utilizing the .classList property, we can dynamically add, remove, or toggle classes on elements. This allows us to apply style changes (such as adjusting height and transitions for the top navigation) based on specific user actions.

Below are the 3 examples showcased in JavaScript:

Expanding the Navbar when pressing the TAB key (keyCode == 9), and contracting it when the key is released;
Toggling the expansion when the SPACE key is pressed (keyCode == 32);
Expanding the Navbar when hovering over the Skip section, and shrinking it upon exiting the area.

// Example 1: Expand the navbar while tab key is pressed
document.body.addEventListener("keydown", function(e) {
  if(e.keyCode == 9) {
    document.getElementById("myTopnav").classList.add("expand");
  }
});
document.body.addEventListener("keyup", function(e) {
  if(e.keyCode == 9) {
    document.getElementById("myTopnav").classList.remove("expand");
  }
});

// Example 2: Toggle navbar expand with space key
document.body.addEventListener("keydown", function(e) {
  if(e.keyCode == 32) {
    document.getElementById("myTopnav").classList.toggle("expand");
  }
});

// Example 3: Expand the navbar while the mouse is over
document.getElementById("skip").addEventListener("mouseover", function(e) {
    document.getElementById("myTopnav").classList.add("expand");
});
document.getElementById("skip").addEventListener("mouseout", function(e) {
    document.getElementById("myTopnav").classList.remove("expand");
});

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.TopNavbar {
  height: 4rem;
  overflow: hidden;
  background-color: #333;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
#myTopnav.expand {
  height: 9rem;
  transition: height 300ms;
}

.TopNavbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;  
  font-size: 17px;
}

.TopNavbar a:hover {
  background-color: #ddd;
  color: black;
}

.TopNavbar a.active {
  background-color: #04AA6D;
  color: white;
}

.pageContent {
  padding: 14px 16px;
}

li {
  margin: 10px 0;
}

<html>
<head>
</head>
<body>
  <div class="TopNavbar" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a id="skip" href="#skip">Skip</a>
  </div>

  <div class="pageContent">
    <h3>Navbar extension example</h3>
    <ul>
      <li>Example 1: extend the navbar while <code>TAB</code> key is pressed.</li>
      <li>Example 2: press <code>SPACE</code> key to toggle the navbar extend.</li>
      <li>Example 3: extend the navbar while the mouse is over "Skip" option.</li>
    </ul>
  </div>
</body>
</html>

If this isn't what you're looking for, consider exploring CSS Selectors for more options that may better suit your needs.

Is there a way to adjust my navbar's height depending on the presence of a focused link?

Answer №1

Similar questions

Using Javascript to make API calls

Created a custom function that includes a specific target href parameter

Using jQuery to update a specific item in a list

Display information on the console from any location

Dial the Google App Scripts hotline

Best practice for spreading computed values in Angular 2

Guide to releasing an independent Angular component (njsproj) alongside a web application using Visual Studio 2017

"Assigning an array as a value to an object key when detecting duplicates in a

Each element is being adorned with the Ajax success function class

In what way should a React hook's state be updated when it includes a Map data structure?

Determine the closest parent using jQuery

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

Modify the color of the text input by the user in an AJAX-enhanced text box

Use PHP code to echo a clear division after every third result in MySQL

Issue with the dropdown selection menu

What is the process of inserting information into a json file?

Error message in React YouTube: Unable to access 'playVideo' property of null object

Preventing duplicate entries in a LocalStorage JSON array by saving data

Delaying CSS Keyframe animations

Steps for sending a POST request to myjson