Attempting to design a horizontal dropdown menu for small screens has been a challenge. However, all the resources I've come across seem to be outdated and ineffective.
Attempting to design a horizontal dropdown menu for small screens has been a challenge. However, all the resources I've come across seem to be outdated and ineffective.
Here is the solution.
This code snippet will be effective as long as there are no conflicting custom classes within your project.
:root {
--primColor: #dcdcdc;
--secoColor: #555555;
--cornerRad: 4px;
}
body {
background-color: var(--primColor);
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.custom details {
margin: 40px;
}
.custom summary {
writing-mode: vertical-lr;
text-align: center;
padding: 12px 10px;
width: 23px;
height: 17px;
background-color: var(--primColor);
border: 2px solid var(--secoColor);
border-radius: var(--cornerRad);
color: var(--secoColor);
cursor: pointer;
user-select: none;
outline: none;
transition: transform 200ms ease-in-out 0s;
position: relative;
left: 95%;
}
.custom summary::before, .custom summary::after {
position: static;
top: 0;
left: 0;
}
.custom summary::before {
content: "";
}
.custom summary::after {
content: "III";
letter-spacing: -1px;
}
.custom summary:hover {
transform: scale(1.1);
}
.custom summary::marker {
font-size: 0;
}
.custom summary::-webkit-details-marker {
display: none;
}
.custom details[open] .menu {
animation-name: menuAnim;
}
.custom details[open] summary::before {
content: "X";
}
.custom details[open] summary::after {
content: "";
}
.custom .menu {
height: 0;
width: fit-content;
border-radius: var(--cornerRad);
background-color: var(--primColor);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
margin-top: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
animation: closeMenu 300ms ease-in-out forwards;
width: 100%;
}
.custom .menu a {
padding: 12px 24px;
margin: 0 16px;
color: var(--secoColor);
text-decoration: none;
text-align: center;
transition: filter 200ms linear 0s;
}
.custom .menu a:nth-last-of-type(1) {
border-bottom: none;
}
.custom .menu a:hover {
filter: brightness(200%);
}
.custom details[open]::before {
animation: fadeMe 300ms linear forwards;
}
@keyframes menuAnim {
0% {
height: 0;
}
100% {
height: fit-content;
}
}
@keyframes fadeMe {
0% {
opacity: 0.4;
}
100% {
opacity: 0;
}
}<div class="custom">
<details >
<summary></summary>
<nav class="menu">
<a href="#link">Home</a>
<a href="#link">Work</a>
<a href="#link">Links</a>
<a href="#link">Contact</a>
<a href="#link">About</a>
</nav>
</details>
</div>A possible solution could be to implement media queries specifically tailored for mobile devices in order to ensure proper functionality.
By incorporating such media queries, your content may better adapt and display correctly on various mobile devices.
@media only screen and (max-width: 1024px) {
body {
background-color: lightblue;
}
}
I've been working on converting my WordPress comments into an ajax-driven system. Everything was going smoothly until I encountered a problem with the .catch() method triggering right after the .then() method. Below is the code snippet... Ajax engi ...
I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated. https://i.sstatic.net/PRRHl.png Bootstrap Card ...
Note: Kindly refer to the update at the end of this question before proceeding. The problem described is specific to IE 11 and emerged after a recent Windows update. Following the installation of 5 updates, including one for IE, I removed the latter hopin ...
Is there a way to simulate a mouse click using jQuery? <div id="myId> Simulate Mouse Click programatically</div> I currently have a mouse listener set up. $("#myId").mousedown(function(){ alert("Mouse clicked programatically"); }) ...
The child component is app-google-maps-panel and has 2 properties in the parent component: <div class="col-6"> <app-google-maps-panel [longitude]="longitude" [latitude]="latitude"></app-google-maps-panel> & ...
I am working on an Android app using HTML5 and Cordova. I've included the following code in the manifest.json file as a reference. However, I'm facing an issue where the app screen does not stay fixed horizontally. It only turns sideways when th ...
This is a Laravel blade view/page that requires updating without the need to refresh the entire page. The blade.php code functions correctly and retrieves data from a MySQL database, but there seems to be an issue with the AJAX and JavaScript implementati ...
Greetings from MyWebsite.html! <DOCTYPE !html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <link rel="stylesheet" href="MyWebsite ...
I need to be able to select a specific file by clicking on another button. A helpful solution that utilizes JavaScript to trigger the selection of a hidden file can be found in this answer. You can view the implementation here. In my scenario, I alre ...
Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...
app.js const exphbs = require('express-handlebars'); app.engine('handlebars', exphbs({defaultLayout: 'layout'})); app.set('view engine', 'handlebars'); app.use('/catalog', require('./routes/ ...
While attempting to parse an HTML code using BeautifulSoup in order to retrieve a link that is hidden and does not appear on the website, I have encountered difficulties as it only retrieves links visible on the page. Is there a method to effectively par ...
Here's an anchor tag with a tooltip: <a data-toggle="tooltip" data-original-title="Apologies, pronunciation audio is currently unavailable."> <span class="glyphicon glyphicon-volume-off pronounce"> </span> </a> When v ...
Is it possible to create a meta code that efficiently toggles the visibility of a chart and grid by using checkboxes? Currently, I am redrawing the whole canvas whenever the 'Show Grid' setting is changed, but I'm hoping for a more optimized ...
I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...
I am facing an issue that I need help explaining. The bot works perfectly when I use it from my own Facebook account. However, when I ask others to use it, the bot does not respond to them, even though I have received a green tick on the pages_messaging a ...
main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld"; import User from " ...
I have two JavaScript functions that are called one after the other, as shown below. updateUI(event); syncCall(); function updateUI(event) { formSubmitBtn = $(event.target).find('[type=submit]:not(".disabled")'); formSubmitBtn.attr('di ...
I'm currently exploring methods to manipulate my JSON data and create a separate object with the modified information. Specifically, I am working with this JSON file: My goal is to transform [dataset][data] into the following format: [Date.UTC(2013 ...
I'm currently developing a filtering feature using checkboxes for a data display in a project utilizing React and Material-UI. Is there a custom solution available within Material-UI? If not, what steps should I take to achieve this? As I am rel ...