Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as display:block). The challenge arose when I realized that when the transition starts, the top of the list should be positioned based on a specific calculation (width of a tab multiplied by the number of tabs). Surprisingly, I hope to achieve this without using any JavaScript.

Does anyone know of a solution to address this situation?

htmlcssmenu

Answer №1

Here is a CSS dropdown menu example that I have created:

Using HTML and CSS:

#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
float: left;
margin-right: 3px;
border: 1px solid #ecffec;
position: relative;
}
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 200px;
padding: 0;
display: none;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover
{
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul
{
display: block;
}
<ul id="menu">
  <li><a href="#">Programming Language</a>
    <ul>
      <li><a href="#">Java</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">Asp Classic</a></li>
      <li><a href="#">ASP.NET</a></li>
      <li><a href="#">javascript</a></li>
      <li><a href="#">Perl</a></li>
    </ul>
  </li>
  <li><a href="#">Database</a>
    <ul>
      <li><a href="#">SQL Server 2005</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">DB2</a></li>
    </ul>
  </li>
   <li><a href="#">Help</a></li>
</ul>

Answer №2

Did you take a look at this awesome CodePen?

html part

<h2>Checkbox style</h2>

<div class="dropdown">
  <input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
  <label for="my-dropdown"
     data-toggle="dropdown">
  Make a selection
  </label>
  <ul>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Coverage</a></li>
    <li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
  </ul>
 </div>


<h2>Link style</h2>

 <div class="dropdown">
  <ul id="my-dropdown2">
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Coverage</a></li>
    <li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
 </ul>
  <a href="#my-dropdown2"
    aria-controls="my-dropdown2"
    role="button"
    data-toggle="dropdown"
    id="my-dropdown2-btn">
  Make a choice
  </a>
     <a href="#my-dropdown2-btn"
     aria-controls="my-dropdown2"
    role="button"
     data-toggle="dropdown"
     class="close">
  Close dropdown
  </a>
 </div>

css part

I highly recommend checking out the link above - you won't be disappointed!

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

Are you looking to test your website's performance under limited bandwidth conditions

Similar Query: How can I test a website for low bandwidth? Would it be possible to mimic a slow internet connection to test my website's performance? I need to simulate lower speed conditions in order to observe how the site behaves. ...

jqueryhtmlcss

don't forget about the vertical multilevel navigation in the menu state

I've been working on creating a vertical multilevel navigation menu, but I'm having trouble figuring out how to make the last menu state stay active when switching to a new page. I've explored options like using hash locations and cookies, ...

javascriptjquerymenustate

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Can anyone help me with this HTML snippet? <select id="something"> <option value="1" data-something="true">Something True</option> <option value="2" data-something-else="false">Something Else False</option> </selec ...

javascriptjqueryhtmlcustom-data-attributejquery-data

Table placement within a cell of a table

Seeking assistance with an issue I encountered, where the date of 12th March is combined with a table. Any suggestions on how to separate them? Screenshot: UPDATE:JFIDDLE ...

htmlcss

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for: To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript: $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-men ...

htmlcsstwitter-bootstrap

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...

javascripthtmlangularjs

Tips for extracting data from an Angular object using the *ngFor directive

https://i.stack.imgur.com/ai7g1.png The JSON structure displayed in the image above is what I am working with. My goal is to extract the value associated with the key name. This is the approach I have taken so far: <span *ngFor="let outlet of pr ...

htmlnode.jsangulartypescript

Ways to incorporate a scroll feature and display an iframe using JQuery

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...

javascripthtmljquerycssiframe

Getting the string value from a table row using JavaScript

I need to capture the value of result_status from the row labeled status. If all values in the row labeled status are 'pass', then the result_status will also be 'pass'. However, if any one of the values in the row labeled status is &a ...

javascripthtmlajax

Transform all characters to lowercase, then capitalize them using only CSS

I came across a discussion on this topic at: First lowercase the text then capitalize it. Is it possible with CSS? However, the solution provided was not purely based on CSS. I have a div that contains the following text: <div> RaWr rAwR </div&g ...

capitalizecss

Is there a way to create a div that resembles a box similar to the one shown in the

Hello, I am attempting to achieve a specific effect on my webpage. When the page loads, I would like a popup to appear at the center of the screen. To accomplish this, I have created a div element and initially set its display property to 'none'. ...

javascriptjqueryhtmlcss

What steps should I take to insert a divider in a dropdown menu?

I am attempting to enhance my dropdown menu by incorporating a separator using the following code: <li class='divider'></li> Below is my HTML code with the separator included: <ul class="dropdown-menu dropdown-menu-right" id="ul ...

javascriptjqueryhtmlcss

How to create HTML buttons with CSS that maintain proper proportions?

How can I ensure that my HTML buttons adjust proportionally to different screen sizes? I've been working on coding an Android app using HTML and CSS, and everything seems to be running smoothly. However, when I share the file with a friend, he compla ...

androidhtmlcssandroid-layoutmobile

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...

htmlcssbootstrap-4

Creating a distinctive appearance for JavaScript's default dialogue box

Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...

javascriptcss

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

What is the best way to change styles in CSS for parent and child elements using selectors?

Hey there! I am currently working on customizing the navigation menus in WordPress and here is the HTML code for the navigation menus: <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> <h1 class="menu- ...

csswordpresscss-selectors

What is the method for retrieving information from a JSON file that has been uploaded?

I am working with some HTML code that looks like this: <input type="file" id="up" /> <input type="submit" id="btn" /> Additionally, I have a JSON file structured as follows: { "name": "Jo ...

javascripthtmljson

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

htmlcsscss-transitions