Conceal choices in a horizontal dropdown navigation menu

I am trying to create a basic horizontal flyout menu that expands from left to right when hovering over a button. You can view the DEMO here.

.menu {
  position: absolute;
  right: 0;
  height: 50px;
  width: 50px;
  color: white;
}
.menu li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.menu a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.menu a:active, .menu a:focus {
  background: #B44659;
}
.menu i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.menu span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.menu li:hover ul {
  transform: translateX(0);
  background: #B44659;
}
.menu > li {
  display: block;
}
.menu > li > a {
  background: #7D294E;
}
.menu > li:hover {
  z-index: 100;
}
.menu > li:hover a {
  background: #B44659;
}
.menu > li a:hover {
  background: #F56356;
}
.menu > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
  transition: opacity 0.5s;
}
.menu > li:hover a:after {
  opacity: 1;
}
.menu > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(100%);
  background: #B44659;
  transition: 0.5s transform;
}
<ul class="menu">
  <li>
    <a href="#">
      <span>ITEM 1</span>
    </a>
    <ul>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.1</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.2</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

My challenge is to find a way to completely hide the options sliding out from the menu when hovering over an item, instead of just moving them back to their original position on the right. Is there a CSS-only solution for this?

htmlcss

Answer №1

To prevent overflow in your menu, you can apply the CSS rule overflow: hidden. Additionally, adjusting the width of the menu will ensure that it doesn't overflow when sliding.

.visible-item{
  width: 40px;
  text-align: center;
}
.menu {
  position: absolute;
  right: 0;
  height: 30px;
  width: 50px;
  color: white;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.menu:hover{
  width: 400px;
}

// Remaining CSS code blocks are displayed detailing the styling for the menu

</code></pre>
<pre><code><ul class="menu">
  <li>
    <a href="#" class="visible-item">
      <span>ITEM 1</span>
    </a>
    <ul>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.1</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.2</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Run JavaScript Function from Within

Apologies for the straightforward question, but I'm struggling to find an answer anywhere. As a complete JavaScript beginner with no experience, I'm at a loss. Currently, I have a function linked to a simple button click: <input type="button ...

javascriptjqueryhtml

Creating a Dynamic Navigation Bar with CSS and JavaScript

I have encountered an issue with my responsive menubar where the dropdown button does not have any style when clicked. function myFunction(){ var x = document.getElementById("myMenubar"); if (x.className === "menubar"){ x.className += "responsiv ...

javascripthtmlcss

Having trouble with Ajax Cross Domain functionality?

Similar Question: Ajax cross domain call Using the following code... var URLs = new Array(); var titulo = new Array(); $.ajax({ url: 'http://www.example.com.br', type: 'GET', success: functio ...

javascripthtmlajax

every cell should be painted a distinct hue

I need to create a 10x10 array in JavaScript and fill each cell in the 2D array with different colors using canvas. I have managed to do this part, but now I am stuck on how to check if each cell has a different color from its neighbors. Any suggestions ...

javascripthtmlcanvas

Use Javascript to display specific div elements by clicking a button

I could really use some assistance, When I attempt to display the select div by clicking the button, the "id" that PHP generates returns a null response in the console. The requirement is to only show the div when clicking on the "Quick Quote" button. Pro ...

javascripthtml

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

The output from calling getText() on the input field does not return any text

I'm a bit confused about how getText() works in selenium. Take a look at this snippet from a webpage: <input checked name=servClass type=radio value="Coach"> <font face="Arial, Helvetica, sans-serif">Economy class <br> <in ...

javahtmlseleniumselenium-webdriverselenium-chromedriver

Styling images and text in CSS within a jQuery UI autocomplete widget

I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...

javascripthtmlcssjquery-ui

Can you provide me with a method to establish a redirect using a bypass URL?

Is it possible to create a redirect with a bypass URL like this: http://example.com/oldpage?bypass=1 This would skip the redirect. But http://example.com/oldpage Would actually lead to http://example.com/newpage Appreciate all the help in completing ...

javascriptphphtmlscripting

Capturing images on Android devices through the camera option using HTML input file type

Having an issue with an LG G2 Android device running version 4.4.2 and the default browser. I'm currently using this tag to allow users to upload images from their devices to the server: {<input type="file" accept="image/*;” />} When I clic ...

androidhtmlbrowserinput

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

What is the process for calling CSS from a separate directory?

I am looking to start building a website. Can someone advise on how to organize html, css, and javascript into separate folders? One folder will house files specifically for writing HTML and JavaScript, while the other folder will be dedicated solely to ...

javascripthtmlcss

CSS - Radio buttons featuring closely spaced circular options

I am attempting to create small circles that act like radio buttons without any spacing between them. I was successful in achieving this, but I ran into issues with removing the space between the circles. The margin between two circles should be limited to ...

htmlcss

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

javascriptcssreactjsmaterial-ui

Creating nested tabs with Bootstrap: A step-by-step guide on adding tabs within tabs

I am encountering a challenge with nested tabs. I am utilizing Bootstrap and not using custom CSS. Any assistance would be greatly appreciated. <div class="container-fluid"> <!-- Tabs --> <ul class="nav nav-t ...

htmlcssbootstrap-4

Background image with a translucent overlay set at 50% opacity

Looking to add a new section on my website that I haven't attempted before. My goal is to have a section with a full width background image, but with a 50% opacity color overlay on the right side of the image. I came across an example image that demon ...

htmlcss

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

cssvue.jsvue-componentvuetify.js

What is the best way to link or access the button in React?

I'm struggling with figuring out how to make the Enter key reference a specific button instead of the default Submit button. Let me break down the code structure for better understanding. Inside a file called v1 (parent component), there are multiple ...

javascripthtmlcssreactjsdevextreme

Combining Data from Header to Body using HTML5 and JavaScript

I am struggling to figure out how to transfer variables declared in the script from the header of my code to the body. Specifically, I want to capture the user input in the script and replace a placeholder in the body. Here is an example of what I am tryin ...

javascripthtmlhead

Issue with triggering local storage event in IE 11 Enterprise mode

Currently, my web application is operating in IE 11 enterprise mode due to compatibility issues with IE 8 (although IE 11 support is still pending). The usage of localStorage involves a certain action, such as redirecting to the logout page, whenever ther ...

javascriptjqueryhtmlinternet-explorer