Arrange an element to appear hidden behind a text

Question

Arrange an element to appear hidden behind a text

I have a stylish horizontal navigation bar with links set up like this:

<div class="blackbar">
    <span class="blackbar-text"><a href="news.php">NEWS</a></span>
    <span class="blackbar-text"><a href="foo.php">FOO</a></span>
    <span class="blackbar-text"><a href="bar.php">BAR</a></span>
</div>

styled with the following CSS:

div.blackbar {
    margin: 0px;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #888;
}
.blackbar-text {
    padding: 0px 12px;
    font-size: 17px;
    font-weight: 900;
    text-shadow: 0 -1px 0 #000;
}
.blackbar-text a:link,.blackbar-text a:visited {
    color:#e8e8e8;
}

Now, I want to create a dropdown effect that appears when hovering over one of these links. The dropdown should be positioned above the blackbar-div and under the link's text.

I know how to handle the JavaScript part for mouseover/out events with jQuery, but I need help with setting up the HTML and CSS structure to achieve this effect.

Check out this fiddle: https://jsfiddle.net/o4su1Lbd/

Here is an image to illustrate the desired effect:

https://i.stack.imgur.com/wE7MT.png

jquery html css

Answer 1

Answer №1

To ensure proper alignment, replace all the spans with divs and set .blackbar-text to display: inline-block; to line them up. Additionally, include a div containing nested links under one of the .blackbar-text divs.

  <div class="blackbar-text dropdown">
    <a href="bar.php">BAR</a>
        <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
  </div>

Set the position of .dropdown-content as absolute and its display as none. The dropdown functionality is achieved by using the :hover pseudo-class on .dropdown .dropdown-content to make it display:block when hovered over.

.dropdown:hover .dropdown-content {
    display: block;
}

For more details on my solution, please visit: https://jsfiddle.net/tophermurphy/o4su1Lbd/19/

Answer 2

To ensure proper alignment, replace all the spans with divs and set .blackbar-text to display: inline-block; to line them up. Additionally, include a div containing nested links under one of the .blackbar-text divs.

  <div class="blackbar-text dropdown">
    <a href="bar.php">BAR</a>
        <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
  </div>

Set the position of .dropdown-content as absolute and its display as none. The dropdown functionality is achieved by using the :hover pseudo-class on .dropdown .dropdown-content to make it display:block when hovered over.

.dropdown:hover .dropdown-content {
    display: block;
}

For more details on my solution, please visit: https://jsfiddle.net/tophermurphy/o4su1Lbd/19/

Answer 3

Answer №2

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script>
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
  var menu = $(this).next('ul');
  if (menu.hasClass('open')) {
    menu.removeClass('open');
  } else {
    menu.addClass('open');
  }
});
</script>
<title>Test</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li><a href="#"><span><i class="fa fa-fw fa-newspaper-o"></i> NEWS</span></a></li>
     <li class="has-sub"><a href="#"><span><i class="fa fa-fw fa-bars"></i> FOO</span></a>
        <ul>
           <li><a href="#"><span>Sub link 1</span></a></li>
           <li><a href="#"><span>Sub link 2</span></a></li>
           <li><a href="#"><span>Sub link 3</span></a></li>
           <li class="has-sub"><a href="#"><span>Sub link 4</span></a>
              <ul>
                 <li><a href="#"><span>Sub link 4.1</span></a></li>
                 <li><a href="#"><span>Sub link 4.2</span></a></li>
                 <li><a href="#"><span>Sub link 4.3</span></a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><span><i class="fa fa-fw fa-ellipsis-h"></i> BAR</span></a></li>
  </ul>
</div>
</body>

</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
#cssmenu {
  background: #4cb6ea;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  font-family: 'PT Sans', sans-serif;
  box-sizing: content-box;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* Remaining CSS code unchanged for better user experience */
For colors you can change them to fit your requirement

On desktop:

https://i.stack.imgur.com/76U57.png

On smartphone:

https://i.stack.imgur.com/OGZIx.jpg

Answer 4

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script>
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
  var menu = $(this).next('ul');
  if (menu.hasClass('open')) {
    menu.removeClass('open');
  } else {
    menu.addClass('open');
  }
});
</script>
<title>Test</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li><a href="#"><span><i class="fa fa-fw fa-newspaper-o"></i> NEWS</span></a></li>
     <li class="has-sub"><a href="#"><span><i class="fa fa-fw fa-bars"></i> FOO</span></a>
        <ul>
           <li><a href="#"><span>Sub link 1</span></a></li>
           <li><a href="#"><span>Sub link 2</span></a></li>
           <li><a href="#"><span>Sub link 3</span></a></li>
           <li class="has-sub"><a href="#"><span>Sub link 4</span></a>
              <ul>
                 <li><a href="#"><span>Sub link 4.1</span></a></li>
                 <li><a href="#"><span>Sub link 4.2</span></a></li>
                 <li><a href="#"><span>Sub link 4.3</span></a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><span><i class="fa fa-fw fa-ellipsis-h"></i> BAR</span></a></li>
  </ul>
</div>
</body>

</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
#cssmenu {
  background: #4cb6ea;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  font-family: 'PT Sans', sans-serif;
  box-sizing: content-box;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* Remaining CSS code unchanged for better user experience */
For colors you can change them to fit your requirement

On desktop:

https://i.stack.imgur.com/76U57.png

On smartphone:

https://i.stack.imgur.com/OGZIx.jpg

Answer 5

Answer №3

Avoid using span classes and unnecessary javascript. Instead, set the nested content to display:none and utilize the :hover pseudo-class to display it as needed. Check out this example link for more information: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

Answer 6

Avoid using span classes and unnecessary javascript. Instead, set the nested content to display:none and utilize the :hover pseudo-class to display it as needed. Check out this example link for more information: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

Arrange an element to appear hidden behind a text

Answer №1

Answer №2

Answer №3

Similar questions

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

How can you use C# code to control the visibility of a table row in HTML?

Objective-C and the World of WebSockets

What is the process for eliminating the Gravatar link in Wordpress?

What is the best way to configure a basic firebase ajax call?

Exploring jQuery AJAX Attributes during ajaxStart and ajaxStop event handlers

Adjust the background color of alternate elements

Remove an uploaded image utilizing an ajax uploader

Submitting a form from outside the form using a button in HTML: A step-by-step guide

Integrate a variable called "counter" with the jQuery ID

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

Generate a jQuery iframe once more by requesting it

Error occurred due to 'NoneType' object lacking the 'split' attribute while attempting to send a post request through Ajax to Django

Delaying Ajax request

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

Connecting multiple promises using an array

What obstacles may hinder the loading of CSS with PHP variables?

Can a small white pop-up be triggered by clicking a button?

Refining an Ajax populated table