writing CSS for multi-level horizontal menus - html

I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!

If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...

Related

How do I create a scale bar using html and css

I am practising creating websites and I have found a template which I am working on right now.There is a fancy scale bar on the page.Anyone can help me??I do not know how to create this,it looks hard to create.I have tried several times and I failed.
The image of scale bar is right here
The <meter></meter> tag should be okay for this, though you'll need to style it to get the effect you want. This site can give you pointers on that.

Ionic Build creates DIV where non existed?

I've been searching around and I can't find for the life of me where an extra div is being created... the only reason we care is that it's bringing a mid tone grey background color over the Nav bar and it's killing the look of our app.
Hoping for a bit of guidance, happy to post up any relevant code needed; nothing in home stands out (extra div shows up everywhere, so I'm guessing it's not in a single pages worth of css/html).
It might be worthwhile removing all classes from the navbar area, and then adding them back one by one and seeing which one/s cause the problem. Also check the Ionic documentation here to see if there's something else to check out.

Tumblr theme sidebar and infinite scroll?

I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network

Creating a radial menu using very limited css and js

So I know that the question of how to make a radial menu has come up before and I am aware that some people have done absolutely amazing things already, but! I have to make one and I can't use anything more than css and js. The problem is, I have to implement the menu on the clients piece of crap drag and drop editor. It doesn't have anything fancy installed and isn't the most wonderful environment to work in.
To make matters worse, it has to be compatible back to IE8. I know. Trust me.
I was initially thinking of using a bunch of divs shaped as triangles layered over each other, but then I would have to cut off all of the tips poking out. Not sure how to do that.
Any ideas?
By the way, this is the triangle idea: http://imgur.com/YcWeOjE

Navigation Menu - ideas?

I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.
I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.
So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.
After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).
I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.
Thanks.
I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.
I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish
The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.
I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.
Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.
Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.
First, don't use snippets built in dreamweaver. They are awful.
Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.
In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).
Example for showing div:
My menu 1
<div id="menu-1">
<ul>
<li>Alcohol</li>
<li>Spirit</li>
</ul>
</div>
And some javascript:
function show(myid)
{
document.getElementById(myid).style.display = "block";
}
function hide(myid)
{
document.getElementById(myid).style.display = "none";
}
I made that in a hurry so it's not perfect.