Creating a minimalist metro-inspired menu using HTML and CSS

After researching online for a few days, I've just started learning HTML/CSS and my skills are currently at about a 6 out of 100. I have this code that functions as a blogger HTML widget, but I want to customize it further. Here is the code snippet:

:root .css3-metro-dropdown option,
:root .css3-metro-dropdown:after,
:root .css3-metro-dropdown::after,
:root .css3-metro-dropdown select
{
color: #fff;
}

<!-- More CSS styling -->

I'm aiming for a design similar to www.metrominimalist.blogspot.com

htmlcssmenumicrosoft-metro

Answer №1

For a different approach from the usual <select><option>, consider using <nav><ul><li> instead. Check out this tutorial for creating a pure CSS dropdown menu at

Answer №2

Instead of relying on select tags with options, I recommend utilizing Unordered Lists (UL) instead. Replace your selects with something like this:

<ul class="primary-nav">
 <li>Client-side Languages
  <ul class="primary-nav__subnav">
   <li>JavaScript</li> 
   <li> CSS </li>
   <li> HTML </li>
  </ul>
 </li>
 <li> Server Side Languages
  <ul>
   <li> 1 </li>
   <li> 2 </li>
   <li> 3 </li>  
  </ul>
 </li>
 <li> JavaScript Languages </li>
</ul>

You can style the CSS by using display:inline-table on the top level menu (primary-nav) to show items next to each other. Use :hover pseudoclass to toggle the display of each submenu. Remember to set a height on the primary-nav UL to prevent expansion when submenus are revealed.

Check out this working example

If preferred, you could implement javascript for this functionality. There are also alternative methods available if setting a height on the UL is undesirable.

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

aligning adaptable grid on the screen

Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code: <!DOC ...

css

Applying box-shadow to tables and collapsing borders with border-collapse property in IE!

The box-shadow property does not function properly in Internet Explorer when the table has a border-collapse: collapse style applied to it. ...

css

Struggling with JQuery to revert an element back to its original position after the mouseout event

Hello all, I'm a newcomer here and I've been trying my hand at some basic JQuery. However, I've encountered an issue that I could use some help with. Have you ever come across those boxes on websites where when you hover over them, an arrow ...

javascriptjquerycssjquery-animateslide

How can I pass an Objective-C object to JavaScript?

Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...

javascripthtmlobjective-cioswebkit

How can I retrieve values from HTML5 data attributes using Selenium in Python?

How can I extract the value "165796011" from data-gbfilter-checkbox? I attempted to do so using the following code: element= driver.find_element_by_css_selector('#widgetFilters > div:nth-child(1) > div.a-row.a-expander-container.a-expander-inl ...

pythonhtmlseleniumweb-scraping

quickest method for attaching a click listener to dynamically added elements in the document object model

When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...

javascriptjqueryhtml

Is there a way to automatically open an expand/collapse section when linking to it?

I am attempting to automatically open the bootstrap expand/collapse details when linking to them from another page. For instance, I want to link to a page similar to , which includes multiple expand/collapse sections. My goal is to link to a specific sect ...

htmlhyperlinkbootstrap-4expand

Unable to invoke the jQuery function within CakePHP3

I am having trouble calling the jQuery function mentioned below in my CakePHP3 MVC project. There are no error messages, but nothing seems to be happening. The code is set up so that jQuery gets included automatically. The function I am trying to call sh ...

javascriptjqueryhtmlcakephp

Using HTML to create an email link with a subject that includes special characters such as '&'

Is it possible to dynamically set the email subject to include an '&' sign in client-side HTML? Here is the code I am working with: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="533d3c7e3c3d361320 ...

htmlemailspecial-charactersmailto

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into s ...

htmlcss

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

Conceal / reveal minuscule letters

Is it feasible to hide or select only the lowercase characters of a string using CSS? <p>Richard Parnaby-King</p> How can I display just RPK? While ::first-letter allows me to show the letter R, is there a way to go further with this? p ...

css

Apply pointer style to the CSS only when a division contains text

If there is plain text inside a div with class="x95qze", how can we add cursor:pointer only to the second div that contains the text Cursor pointer required here. The div with class="x95qze" will not change. The content of the div may ...

htmlcss

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal

Using :not() in CSS can sometimes lead to unexpected outcomes

I need help with styling the current page list item in a menu that has the 'current_page_item' class. In this case, I want to highlight the "About Us" list item. I'm struggling with excluding the 'children' class (sub ul) using : ...

csswordpress

Difficulties arise when retrieving the value of a radio input in PHP using the model-view-controller framework

My attempt to retrieve the value of a group of radio inputs in a form is not successful. VIEW: <form class="form-horizontal" method="post" action="Index.php?opt=filter"> stuff... . . . <div class="form-group"> <label class="col-md-4 ...

phphtmlforms

What is the method for including a hyperlink in an swf document?

I've been working with HTML and trying to embed links in my webpages that are in offline mode. After doing some research, I came across the following code snippet: MyClickTagButton.addEventListener( MouseEvent.CLICK, function():void { if (roo ...

htmlcssactionscript-3flash

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...

javascripthtmlreactjstypescriptnext.js

Vue Template ref Error: Unable to access scrollHeight property of null object

I'm currently working on creating a responsive sidebar in Vue, and I encountered an issue after refactoring my project to remove the state.js file. The problem is related to the dropdown/collapse elements, and it's throwing a TypeError: Cannot re ...

javascriptcssvue.jstypeerror