I'm looking for the CSS code to create a multi level vertical menu with no Jquery or javascript just pure CSS.
I have the HTML part done and ready to go!
You should follow this guide until step 3.
In case that site ever goes down essentially what you are going to need to investigate is using the :hover selector to show and hide various parts of the menu at any given time.
The flyout menu from www.cssmenus.co.uk might be worth looking at?
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
Hi all I am working on a project and am trying to do this all by hand for a learning exercise. I am not looking for the code that does the job but just an explanation of how this should be done.
the page I am working on is http://dev.davydsoft.com/playing.html
What I would like is to have a dropdown "menu" image when you hover over the pics up top. This is inspired and by the twitter bar. When you click on your user name on the twitter bar you get that dropdown.
I have played with alot of examples and for some reason it just wont click for me.
Any pointers would be great.
welcome to the stack overflow! I would recommend that you take a look at the first tutorial on this page:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
It explains how to use jquery (javascript) to show and hide hidden html elements.
If you are looking for a css only solution, you might search for "css suckerfish menu".
You need javascript for the hover event css for styling and html
Have a look at: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Basically, if you only want guidance, then start looking into how to style with :hover selectors.
Wondered if anyone had any links to a tutorial for a navigation bar in css (not javascript). I'm after a 2 tier horizontal bar. the bottom tier being also horizontal.
Just like the following image
any pointers would be a great help!
cssplay.co.uk has plenty of dropline menus. Just look under "Multi-Level - Dropline". Pay attention to copyright though.
I think you just mean two tiers, and they are both visible all the time, not that the second tier is visible on hover, correct?
If so, here's a basic fiddle example: http://jsfiddle.net/jblasco/XAE9c/
Anyway, the idea is to use two ul lists, and place the li elements of your nav in them accordingly. You can then style the list items however you want from there, as well as add links to their content, etc.
If you have a dynamic page, you would do a simple server-side check for if ($PageURL == "blah.php") { and spit out class="active" on the current tab, and style that however you like.
I'd suggest using inspect element on some nav bars you like, and going from there.
The solution without Javascript for IE hover hack http://webstuffshare.com/demo/New-CSSTabMenu
but it may not behave in the way you want, are you after reveal on hover?
http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/
THE guide: Suckerfish Dropdowns.
http://www.alistapart.com/articles/dropdowns
You'd just modify the styles to be fully horizontal.
I've been using the SuckerFish menus for pretty much ever right now... however I need something a little newer. mainly something that will handle drop-down items and fly-outs of variable widths. i.e. I may have 6 drop-down main items, each sub-menu needs to be a variable [dynamic] width AND the fly-outs for each are also of differing widths.
SuckerFish does not handle variable widths for the drop-downs particularly well .... has anyone got any suggestions?
The site is using jQuery, though I am not too hot on javascript 'anything' for navigation a pure CSS would be nice if possible.
-thanks
-sean
CSS has limited animations with limited browser support (looks like only the latest WebKits).
For a cross browser animated menu, you'll have to leverage JavaScript.
jQuery will make doing it quicker and less painful, but is not a requirement.
You could set things up with your usual SuckerFish as a baseline and then add Superfish on top of that to provide the fancy animations and what not. Superfish is built with jQuery so it should drop in fairly easily.
I'm new to Flex.
I want to build cool web application in flex.
For displaying content of my site, I use viewstack and button bar. It is ready, but now I'd like to add some animation effect in that.
For example changing the navigation content shows flip animation.
So how do I do that?
Help full link.
This sounds similar to another question: How can I nicely animate between viewstacks.
Perhaps that will help?
That example shows the most basic kind of animation which is readily available using open and widely supported web-standards such as HTML, CSS, and JavaScript. The jQuery library will allow you to do this in just a few lines of code. Do you have an absolute requirement for flex?