Currently, I have implemented a superfish dropdown menu within the skelton framework. My goal is to make it functional on mobile devices as well. The issue I am facing is that by default, the dropdown items appear but they hover over the items below them. Is there a way to configure it so that it pushes the parent items below it instead? Any suggestions or solutions would be greatly appreciated.
Check out this responsive drawer menu!
If you're looking for a better answer to converting HTML for Superfish into a responsive drawer menu, look no further! The JS code is simple and the magic happens with CSS. Take a peek below and share your thoughts with us.
// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(
function() {
$('.sf-menu').toggleClass("xactive");
});
// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(
function() {
$(this).parent().toggleClass("xpopdrop");
});body {
font-family: Arial;
font-size: 12px;
padding: 20px;
}
#mobnav-btn {
display: none;
font-size: 20px;
font-weight: bold;
background-color: blue;
color: white;
padding: 10px;
cursor: pointer;
}
/* Rest of the CSS code goes here */<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" />
<small>This is a responsive Superfish Menu by <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22505b434c405043414947565662454f434b4e0c414d4f">[email protected]</a>">Ryan Brackett</a>. <br/>
<br/>In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish</small>
<br/>
/* Rest of the HTML code goes here */Latest Update: Check out Ryan Brackett's response for additional insights
When it comes to mobile devices, dropdown menus can be tricky to navigate. One suggestion is to hide the superfish menu on mobile and consider using an alternative approach.
Some recommended resources include: Off canvas
Exploring Mobile navigation patterns
If you're facing similar issues, ensure that you are utilizing the most up-to-date jQuery version. Upgrading to a newer release has been known to resolve Superfish menu compatibility problems on mobile platforms.
Upon closer inspection, Ed raised concerns about the challenges of resolving various superfish/css issues for a responsive menu.
After exploring different options here and elsewhere, I stumbled upon a Pure CSS responsive menu that proved to be more efficient and easier to customize compared to superfish. Additionally, it does not require the overheads of jquery or javascript and offers second-level menus.
I verified the demo using screenfly to ensure responsiveness and mobile layout suitability prior to utilization. The version on CSSscript.com (linked above) presents a horizontal responsive layout for mobile devices, unlike the one displayed on the codepen demo page.
https://i.sstatic.net/LVlAA.jpg
https://i.sstatic.net/iG9gZ.jpg
The code is contained in a single HTML file which can be effortlessly split into a linked CSS file. Only 2 media queries handle responsive adjustments, with minimal modifications required. The '+' symbols can be removed without any adverse effects.
There's only one minor drawback: the initial link downloads an HTML containing javascript at the bottom, including obvious Google Analytics tracking. However, this can be easily eliminated and is not present on codepen.
Explanation author Andor Nagy - code from codepen
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers*/
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }<div id="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>Here is my preferred approach:
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
$(".menu a").click(function(event){
if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
event.preventDefault();
$(".menu a").removeClass("lastClick");
$(this).addClass("lastClick");
});
Simply update ".menu a" with your specific navigation links, and this code snippet will direct the user to the selected site after the second click, while displaying subpages on the first click.
Reshad suggests a simple CSS modification:
.xpopdrop > ul {
display: block!important;
}Implement this change in your CSS and everything should work smoothly.
I am using a setTimeout function to reload another function every 5 seconds. The update_list function is responsible for rendering entrances in a view. However, when there are many entrances and you have scrolled down, the list empties and reloads every e ...
Hello, I am new to using Vue.js and I am currently integrating Firebase for authentication in my project. Below is the Firebase code that I have separated into a different JavaScript file. This file contains all the mutations, states, actions, and getters ...
I'm encountering an issue with the Slick carousels I have set up. The appendDots parameter is displaying too many navigation dots on each carousel. For example, if there are 3 Slick carousels on a page, each carousel ends up showing 3 sets of dots in ...
Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...
Question: Dynamically creating keys in javascript associative array Typically, we initialize an array like this: var ar = ['Hello', 'World']; To access its values, we use: alert(ar[0]); // Hello However, I am looking to assign ...
I am working with a hi.json file that contains an object. In my JavaScript code, I import this JSON file like so: var obj = require("hi.json"); Now, I need to figure out how to write data into the JSON file programmatically using JavaScript. Is it possib ...
I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...
data= { "id": 1, "name": "samuel", "Manager": [ { "id": "", "name": "manager1", "approvers": [325,134], ...
Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...
Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...
My div is initially displaying properly in one row at the beginning. However, when the user changes the select option to "b" and then back to "a," the display breaks. The two texts "my left side text" and "my right text" are displayed on two lines, one be ...
Over the past week, I've been attempting to get grunt, babel, and webpack to work together smoothly. Despite trying various solutions that I found during my research, nothing seems to be working as intended. Below is the relevant portion of my gruntfi ...
I have a goal to create a webpage that showcases data fetched from a database. To achieve this, I've written functions to retrieve the necessary information from the DB using Node.js. Being relatively new to Node.js, my understanding is that to displa ...
Within the site (developed with React, utilizing Typescript and Tailwind), there exists a component that allows users to watch videos (constructed using the HTML Video tag). Additionally, beneath the video, there are various dropdowns and buttons. However, ...
I am trying to create a unique effect on an SVG image by overlaying color images on top of it through paths with background images. The goal is to make it appear as though parts of the image transition into color when hovered over. If you want to see the ...
Currently, I am facing an issue with my code where I use OBJLoader to load an OBJ file and the function returns an Object3D type. However, I need to perform CSG operations on the object which only supports MESH, not Object3D. Is there a method to convert ...
Within the header of my website, I have structured 3 separate divs - one for a logo, one for a search input, and one for a cart link. My goal is to align these 3 .col-md-4 divs in a vertically centered position. While these divs currently have an align-it ...
I've been working on creating a basic RESTful API using express4, mongoose, and body parser as middleware. Index.js // Setting up the base var express = require('express'); var mailsystem = express(); var bodyParser = require('body- ...
Hey there! I'm a new member of the StackOverflow community and I could really use some assistance. My current challenge involves performing an inverse geocode to retrieve addresses from coordinates. I have a functional URL that works with ajax, but I ...
I am in the process of creating a page that will show users the cost of repairing their damaged mobile phone. With a database containing all the pricing information for various phone models and issues, I need to figure out how to display the final price af ...