Doing some reading I there are mentions that Zurb Foundation has something that supports side slide-out menus, similar to the one that can be found on the following website (triggers via the icon on the top left corner): http://www.dtelepathy.com/
Looking at foundations doco I'm unable to find anything. Would anyone be able to point me in the right direction on how to achieve such behavior with Zurb Foundation?
Many Thanks!
There is something for Foundation 3 called off canvas slides. I am not sure that this is compatitible with Foundation 4.
http://zurb.com/playground/off-canvas-layouts
The one you're looking at on http://www.dtelepathy.com is drawjs:
http://codepen.io/rolandjitsu/pen/CgmGd
Related
I'm trying to create a website as a portfolio for a graphic designer friend. I want to be able to import pictures of different sizes a bit like on this website https://victorthemes.com/themes/fraxos/home-version-two/
I tried replicating the design using bootstrap but the column system doesn't work in this case.
Upon further inspection, I realized that the position "top" and "left" move automatically depending on window size.
I was wondering if anyone could inform me on how to get to this result, plugin, template, JS or JQuery ... and if someone has an example I would be grateful to see it.
I'm looking for templates - including WordPress templates - but I can't really find what I want.
The website you are showing might as well be made with a grid plugin, like the one found here:
http://gridstackjs.com/
However, based on what you said about 'different photo sizes', you might be looking for what is called a masonry layout. Check the following plugin link that also includes examples:
https://masonry.desandro.com/
You could use UIkit for your framework -- it comes built in with a masonry style grid.
https://getuikit.com/docs/grid
This "image slider? thing. What is it called?
If you go to myanimelist.net, there is this very nice and simple image slider and upon clicking it, it redirects you to the specific anime details page according to what you clicked. What is this widget called and where can I learn to create something like this?
A beginner programmer that wants to create a website but no idea how to start.
The page uses css mostly. if you are really starting and want to learn try with JQuery is a Java framework with "widgets" like you call them.
a duplicate of what you need is here: https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/
This is image slider or carousel slider. You can make it easy by using bootstrap 4 carousels. Bootstrap is very easy to learn and for image slider, you don't need to learn Jquery. Here is a link which will help you to make carousal Bootstrap Carousel
If you wanna use direct code then you can check this link Jassor Image slider
This is called a Carousel or Slider. You should be able to create this with just HTML and CSS and a tad bit of JavaScript. I first learnt building one by going through this link in W3C. When I got older and experienced I stopped building one from scratch for every project, instead started using Bootstrap Carousel. A good resource to learn this is from here.
I have a quick HTML foundation question. I am using foundation for my HTML page. I want to know how to do a photo gallery that has next and pervious and auto play with a description under each photo any ideas?
You might want to check Slick slider which is also recommended by Zurb:
http://kenwheeler.github.io/slick/
(Orbit Slider by Zurb is already deprecated)
Foundation has a build in element called Orbit for that: Orbit Carousel
You can access the plugin options directly via data attributes.
I can't do vertical slide in orbit, using foundation 5. The only type of animation that works is animation:'slide'. I opened the orbit js file, and realized that only this option was contemplated, regardless of the documentation on the official site, which implies that I could use fade, vertical-slide and others. Has anyone been successful in doing this?
It seems that foundation has taken the animations from this plugins...
I'm looking for a good working example of off-canvas responsive design. Just trying to replicate the interface of Google+ android application, and add the panel on the right.
Something like this example. However this example has a number of issues:
does not work well on touch screen (Chrome on Galaxy Nexus);
the menu should be under the content div, not sliding with it;
the 'menu' button does not slide with the content div to the right.
Can you tell me how it is better to build somethig like this?
Thanks for any help.
The Zurb Foundation framework includes off-canvas responsive design along w/ a few cool examples and instructions
http://www.zurb.com/playground/off-canvas-layouts