after I spent two hours trying to figure this out by myself, I feel it's the right time to ask people who actually know how to code.
What is my situation
I'm building a WordPress theme and I struggle to make the navigation work the way I want it. What I have in mind looks like this:
sketch of home page
Since it is WordPress menu (and because I plan to adapt the looks throughout the website), I need it to be a list. But I struggle to make the first-level items appear as headings and the second-level items as items below.
This is as far as I got:
https://jsfiddle.net/grysom/bpe924du/
I tried random stuff using flexbox properties + adding a break using :after selector with content: "\A"; but with no luck.
Do you have an idea how to do it? Is it even possible?
Thank you in advance for your ideas!
Have a nice day
grysom
You'll want the 2nd level list <ul> to be inside of the <li>:
<ul>
<li>
Pro veřejnost
<ul>
<li>Co je ergoterapie</li>
<li>Kdo je ergoterapeut</li>
<li>Seznam zařízení</li>
<li>Etický kodex</li>
</ul>
</li>
<li>
Praxe
<ul>
<li>Nabídky práce</li>
<li>Vychytávky a tipy</li>
<li>Legislativa</li>
</ul>
</li>
</ul>
I've updated your jsfiddle: https://jsfiddle.net/grysom/bpe924du/ but you'll need to adjust your styles a bit to differentiate the levels.
Related
I have built a CSS Sprite Navigation. The Navigation functions fine unless you have the UL list in a differnt order than the style sheet, or don't use all of the li elements.
You can see the examples here:
http://www.reneebuller.com/_temp/navigation.html (works)
http://www.reneebuller.com/_temp/navigation1.html (nav2 and nav3 are switched)
(Then go to nagvigation2.html nav 2 is deleted... sory I can't post another link because I'm a newbie and limited to two)
You will see in the later two examples that something happened with text. I can't figure out what is goin on.
You need to change the name of the IDs as well. This is bugged:
<li id="navThree"><a class="" href="#">Two</a></li>
This will work just fine even if inverted:
<li id="navThree"><a class="" href="#">Three</a></li>
<li id="navTwo"><a class="" href="#">Two</a></li>
You don't have any of the CSS in the second example that was used in the first.
Hi i have seen you have made totally image based navigation i think you can easily make this navigation through pure css and than you can make changes easily in css navigation.
please check i have made pure css based navigation similar like your navigation i hope this will help you:- http://jsfiddle.net/YRjE8/10/
Is there a way (or component i could use) to output a simple menu.
I just need it output as a list, like you would use for a simple superfish menu.
I've looked at the menu control and cssadapters (css friendly) which kind of works,
except there is a lot of styles and javascript output with the menu which is destroying the look.
If I can't find something that outputs a clean list, my next option is to craft some jquery to delete these styles. This is not my preferred option. If you have a better idea, please let me know.
Just something that looks like this:
<ul> Main Menu
<li> hi </li>
<li> second menu
<ul>
<li> in second menu </li>
<li> hi there </li>
</ul>
</li>
</ul>
Thanks.
You can use the Repeater server control. You are in control of all of the markup output to the screen.
I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery.
I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right.
How do I stop it from doing this?
Here's the code:
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
Hard to say without looking at the whole, but based on knowing very little of your problem, the only thing I can recommend you to try is this CSS property:
ul#nav {
position: absolute;
}
This way, it will not push other elements away. It might have other consequences tough, depending on other elements you might have.
Looks like you're missing a closing </ul>? You can also use The W3C Markup Validation Service to tack down errant tags.
I have an unordered list I'm displaying horizontally as the page's top menubar. I've gotten it to display relatively well, although I've been playing with the spacing for IE6 and IE7 cause it's not displaying properly. Shocking. In either case, is it better to use a table to display the menu or use some CSS hacks, which I can't find a way around? What is the best way to display the menu? I should add some of the options have dropdown menus using their own unordered lists.
Check out List-a-matic, it has a host of different menu templates that you can use as a base.
A simple horizontal list can be displayed using css and an unordered list
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
It's hard to give a definitive answer without an SSCCE from your side (a plain <html> document including doctype and embedded styles) which reproduces exactly the problem you have. But I can at least tell that the common problem is that you didn't get the doctype right and that IE's boxmodel bug plays a role here.
If that's not the root cause, then the next possible cause is the fail in understanding how to use floats and/or inline/block elements. To get good and solid code examples to start with, Google "suckerfish menu".
EDIT:
You cant depend on display: inline-block to handle this because cross browser support is problematic. Use floats instead with dispaly: inline; position: relative.
I would continue on with the UL's. Dont use hacks for IE* though - use IE Conditionals to add different stylesheets for different versions of IE.
I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).
Is there a way to turn SIFR
ON for ul#menu li
but OFF for ul#menu li li ?
Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.
Thanks so much for the help.
I'm going to assume your HTML structure is like this:
<ul id="menu">
<li>
My link
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.
Therefore:
<ul id="menu">
<li>
<span>My link</span>
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
And replace ul#menu > li span.
Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.
This can be done with the CSS child selector:
ul#menu > li
this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.
For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:
$('ul#menu > li').css({ ... });
which you can place in conditional comments.
If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of
if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}
I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.