I want to create a menu with some items, and at the end of this menu, it has a "Show More" dropdown. This "Show More" shows the rest of the items of menu, that could not be viewed because of the width of the browser. A classic responsive problem.
To illustrate:
And when the width is less than the image before, it happens:
So, my question is, what's the best way to do that? Is there any ready solution?
I am using Foundation, so I can't use any of another CSS module like Bootstrap. But, I can use jQuery, CSS3, HTML5. I don't have more limits than that - I guess =)
I got those images from Instantcart website, so, you can go there to see it working.
Related
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
I'm working on this site: http://editingplus.com.au
In the submenu Resource > Getting published, at some screen sizes when a link is clicked, instead of navigating to the link the submenu jumps to a different position and then closes. A second attempt at opening the menu and clicking the link works, but only if you try to click the same link--clicking a different link means you have to start again and click that link a further time.
This problem only occurs at smaller screen sizes where the Getting Published submenu doesn't fit to the right of the Resources submenu. Clicking on the Getting Published submenu makes it jump briefly from the left to the right of the Resources submenu before closing. At larger screen sizes where the Getting Published submenu fits to the right of the Resources submenu, links work on first click.
This screenshot shows the situation of the Getting Published submenu being to the left. It's when it's like this that the menu jumps then closes.
This is a problem with JavaScript--if I disable JS on my browser and the site falls back to CSS only menus, the links work first time.
I haven't made any custom menus. The site is using the Mins theme from GoDaddy, which is built off the Primer theme. As far as I can tell, neither of them are using any custom JS for the menus, and all the JS is standard WordPress JS.
StackOverflow recommended I check out these two other questions:
Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
Submenu disappearing when clicked in the submenu in wordpress
However, those are both to do with developing custom menus, and those menus not working ever when clicked, rather than only sometimes not working at certain screen sizes.
I'm guessing I will need to add some custom JS to this site to stop the menus not working, or somehow disable the JS so the menus roll back to pure CSS, but I'm not sure how to do either of those things.
Any help would be much appreciated!
Hey guys im on my mobile trying to use jsbin and what a pain. Anyways is there a way to hide a select menu and on click of a button open the select menu and since mobile devices shows a popup box id want this for my navigation for mobiles (responsive)
My submenus just dont work with the ux and ui with the mobile responsive layout so I was thinking of using a select menu and those things are ugly so wanted your opinion on how to achieve this if at all possible. Ive tried this http://jsbin.com/narigudu/1/edit
This really is a fairly broad question and normally I'd vote to close it -- but I'm going to try to give you some usable pointers.
You have a few options at your disposal and they all have their pros and cons.
Media Queries Link
This is the "stock answer" to these kinds of questions. Put both the drop down list and the button to pop up the list. Use media query to check screen resolution and hide/unhide the proper one.
JavaScript viewport detection Link
This one is a little trickier since you have to also sit on the windowl.resize event for those pesky people who rotate their phones. Make sure you are getting the viewport and not the screen.
Device Detection Link
Um.. don't. Really. Device detection is bad and lists go stale. MUCH better to use the other methods and really, media queries are the right solution to this.
I'm currently developing a plugin that enabled me to mimic the Office Ribbon interface for web applications.
Now, everything up now is functional, but I want to add some animation to it, just as in the original Ribbon.
For people who have Outlook 2013, you can see the behaviour what I mean:
When you click on item that has a dropdown (f.e. "New items") the dropdown comes fly in from the top.
Now, I have created a dropdown myself which become visible by clicking on the icon, but this is without animation (just display block).
Can someone provide me the code I need to make it fly in from the top?
You can find the fiddle here: http://jsfiddle.net/Complexity/nf7Lr/
my menu is decorated with the following class:
<div class="menu" id="mnuCleanUp">
So, I want the menu to fly in from the top (just under the clicked button).
Kind regards,
Kevin
To show the menu
$("#mnuCleanUp").slideDown("slow");
and to hide it back
$("#mnuCleanUp").slideUp("slow");
Jquery has built in method to have smooth appear/disappear
Have you check : http://api.jquery.com/fadein/
The easing attribute let you choose different effects : http://jqueryui.com/resources/demos/effect/easing.html
I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.