I'm wanting to implement something similar to following dropdown feature on my website, however I have limited skills in this area. Is there a css library I can use to get the desired result? Or will I have to manually create this myself?
Any examples would be appreciated.
Use BootStrap's Dropdowns. It supports images inside the text area. Overwrite the CSS so that it looks similar to the dropdown in the image. This way you won't need to rewrite everything.
https://getbootstrap.com/docs/4.0/components/dropdowns/
Related
I want to figure out a way to handle responsiveness by reordering divs. I am trying to look for the most flexible solution but any is fine.
View for desktop:
View for Mobile:
Bootstrap has a nice system for this out of the box. You can push/pull columns around at different screen sizes. Doesn't require any javascript, just some new classes. Check out their documentation:
http://getbootstrap.com/css/#grid-column-ordering
And a good tutorial on it:
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
Use the push pull classes to reorder them when you you are in a larger view. Bootstrap has a whole section about this here: http://getbootstrap.com/css/#grid-column-ordering
What would be the points you validate when considering a new menu for your website?
Why should i choose complete CSS based menu ?
Why should i choose Javascript/CSS based menu ?
whats is the benefit in choosing either of them?
Is CSS menu old ? or is it limited in features! I dont think CSS menu is old as i still a pick a thousand web2.0 site using complete CSS menu (No javascript to control its dropdowns).
I default to pure CSS unless there is something I can't pull off with CSS animations, then I'll consider switching to JS. It's pretty rare you'll need the JS unless you need some fancy timed animation across multiple elements or something wacky that CSS animations can't handle.
Using pure CSS the menu still works even when the client has JS disabled. Plus with pure CSS it's usually less code, which is always nice.
A nice way to look at it: would you use JS to change the color of a link when you hover over it, or CSS? This is just a more complicated, but usually similar, question.
CSS controls the layout (and limited interactions, such as hover) while Javascript controls logic.
If you don't need any logic in your menu (such as displaying a hidden div element as a submenu), then using CSS on its own is just fine.
I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin
I am using this layover plugin to display content: http://jquery.com/demo/grey/ I know there must be a simple way to add a drop shadow border to the layover, similar to: http://fancybox.net/ but I can't figure out what the best method would be. Any suggestions?
Check out the liquidCanvas plugin. It makes it very easy to add drop-shadows (and other things like gradients and borders) to any element.
There is a full write-up and tutorial at http://www.caffeinedi.com/2009/11/02/using-jquery-and-liquidcanvas-to-add-drop-shadows-borders-rounded-corners-and-other-effects-to-your-website-even-in-ie6-and-ie7/
on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover