Take a look at this jsfiddle link. I noticed that when you click the menu button, the little triangle pointing to the button only appears after the animation is complete. I would like the animation to start with the pseudo element and then show the drop-menu element. How can I achieve this?
An ideal solution should leverage CSS3 without necessarily requiring javascript. Compatibility issues are not a concern for me.
If you're interested, take a look at this - LIVE DEMO
.dropdown-box {
display: none;
position: relative;
height: 80px;
top: -30px;
}
.dropdown-box ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -40px;
left: 40px;
border-width: 20px;
border-color: transparent transparent blue transparent;
border-style: solid;
}
.dropdown-box ul {
background-color: blue;
position: relative;
top: 30px;
z-index: 999;
}
Take a look at this JSFiddle demo
An issue arises when sliding the element as it requires an overflow:hidden, which also hides the triangle.
To resolve this, you should slide .drop-menu ul instead of .drop-menu. You can achieve this easily with:
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
Then use the following selector:
.drop-menu.visible::before
The problem now is that during the upward slide, the triangle disappears initially.
To address this, modify your code to:
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Update:
Another solution is to utilize:
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
For a working example, visit: http://jsfiddle.net/SZWmd/31/
I'm attempting to design a button that will navigate to the next option in a select menu that has been assigned $selectmenu. $('option:selected', 'select').removeAttr('selected').next('option').attr('select ...
Trying to create a chart using highcharts involves getting data from a datatable in VB.NET, converting it into an array, then transforming it into JSON before passing it back to JavaScript for rendering. However, the data is not appearing on the chart, pos ...
Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...
On a single page, I have multiple forms that are submitted using ajaxForm and display upload progress. Each form has the same class '.input_form', a unique id, and a hidden input field with the name and class of 'category' containing a ...
Struggling to apply a background image on my webpage due to JQuery Mobile CSS taking precedence over my own styling. Despite attempting the following solution, it remains unsuccessful. body { height: 100%; background-image: url('ProjectImages/log ...
I am attempting to showcase an Intro.js tour on a specific element located within a <table>. This particular <table> is nested inside a dialog box created using jQuery UI. The rows of the table are dynamically inserted using JavaScript: while ...
I currently have a PHP website with a functional chat module (via ajax). As part of my project, I am developing an Ionic app for this chat module and hence attempting to convert my PHP code into NODE.js In order to retrieve a list of chat users, I have wr ...
When trying to insert multiple documents with MongoDB in the same request, I am encountering an issue where I am getting an undefined value. .post(function (req, res) { ... Item.create(data) .then(function (item) { var newOtherItem; ...
Receiving the date time value from the server and storing it in a variable named a1: let a1 = (new Date(estimatedServerTimeMs)); console.log of a1 Sun Apr 05 2020 11:36:56 GMT+0530 (India Standard Time) The date is converted to a simpler format such as ...
Currently, I am exploring the functionalities of GraphHopper Route Optimization API for solving Vehicle Routing Problems (VRP) with pickups and deliveries. To test it out, I am using an example from . The specific request I am making is as follows: var ...
I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...
One of the challenges I am facing revolves around a utility function responsible for launching a child process. The goal is to halt the listening process and trigger the callback as soon as the child process outputs a specific message to stdout: export co ...
As I work on creating a user-friendly dashboard with widgets that can be sorted, docked, and floated, I encountered an issue. The controls I am using generate floating widgets as HTML at the bottom of the DOM, outside the controller scope where they were c ...
Getting ready to create a mobile web app powered by Kik! First step, insert the Kik.js script at the bottom of your HTML page... <!-- add this script to your webpage --> <script src="http://cdn.kik.com/kik/2.3.6/kik.js"></script> Excel ...
I need help figuring out how to stop the setInterval function when the button is clicked and changes to "STOP." Even though the button toggles between START and STOP, the random background color changes continue relentlessly. $(document).ready(function(){ ...
Challenge: I am facing an issue where I have a series of numerical values separated by commas that I need to convert into an array. Each pair of values should be nested within the main array to represent drawing vertices. How can I tackle this challenge ...
Instead of just removing the scrollbar, I want to ensure that scrolling capabilities remain intact. This is important because I want to create a 'slide show' effect on the website where users can click 'next' and scroll through content ...
I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...
Are there other security risks to consider when using iframes besides XSS vulnerabilities? How can I ensure that my website is secure when utilizing iframes? I've seen some JavaScript code that uses top.window, but I'm hesitant to rely on client ...
Here is an array of data provided: const ratingData = [ {name: 'St. Marys School', rating:5}, {name: 'St. Zaviers School', rating:4}, {name: 'St. Marys School', rating:3}, {name: 'Rahul ...