Web Development - WAYWO - #8

[Giraffen93]

[QUOTE=Jelly;41394799]You obviously can't do it with your current markup but just because you move it around doesn't make it shitty.[/QUOTE]

but the transparent backgrounds will mess up big time

[QUOTE=KmartSqrl;41394959]It should hide when you mouse out because that is expected behavior and an established convention, and that's going to happen if you do it with pure CSS anyways.[/QUOTE]

i know how to do it when it's nested but i can't really do it that way

[KmartSqrl]

[QUOTE=Giraffen93;41395113]i know how to do it when it's nested but i can't really do it that way[/QUOTE]

Why? I find that really hard to believe.

[Giraffen93]

[QUOTE=KmartSqrl;41395232]Why? I find that really hard to believe.[/QUOTE]

usually you have it as a child to the parent button, right?
can't really do that since the layout is pretty fluid and the transparent background will mess up

[KmartSqrl]

[QUOTE=Giraffen93;41395263]usually you have it as a child to the parent button, right?
can't really do that since the layout is pretty fluid and the transparent background will mess up[/QUOTE]

Yes, but you can absolutely position the dropdown and make it 100% width and still end up with exactly what you have right now.

[Giraffen93]

[QUOTE=KmartSqrl;41395396]Yes, but you can absolutely position the dropdown and make it 100% width and still end up with exactly what you have right now.[/QUOTE]

not all browsers like to set the same padding/margin/font size even when using a reset css

[Jelly_]

[QUOTE=Giraffen93;41395403]not all browsers like to set the same padding/margin/font size even when using a reset css[/QUOTE]

That's the whole point of a reset stylesheet...

[Giraffen93]

[QUOTE=Jelly;41395942]That's the whole point of a reset stylesheet...[/QUOTE]

did you read the whole post?
even when using reset stylesheets it doesn't always transfer right to all browsers

the rendering engine makes pixel perfect fonts impossible

[rieda1589]

Lolwut... Not messy and semantic submenu:

<nav>
    <ul>
        <li>menu item</li>
        <li>menu item
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li>menu item</li>
        <li>menu item
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
    </ul>
</nav>

I can guarantee it will work for your style of menu, just position absolute the submenus (nav ul ul {})

[Giraffen93]

[QUOTE=rieda1589;41396000]Lolwut... Not messy and semantic submenu:

<nav>
    <ul>
        <li>menu item</li>
        <li>menu item
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
        <li>menu item</li>
        <li>menu item
            <ul>
                <li>submenu item</li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
    </ul>
</nav>

I can guarantee it will work for your style of menu, just position absolute the submenus (nav ul ul {})[/QUOTE]

a problem with this too is that it needs to be centered and have the background span across the whole page, and by doing that it needs a lot more code

[TerabyteS_]

[QUOTE=Giraffen93;41396038]a problem with this too is that it needs to be centered and have the background span across the whole page, and by doing that it needs a lot more code[/QUOTE]

Learn to get your hands dirty. Acting lazy like that will get you nowhere.

[Giraffen93]

[QUOTE=TerabyteS_;41396399]Learn to get your hands dirty. Acting lazy like that will get you nowhere.[/QUOTE]

I have built communities and cms systems from scratch, so don't tell me i'm lazy.
It's more from the optimization/clean code standpoint.

[KmartSqrl]

[QUOTE=Giraffen93;41396038]a problem with this too is that it needs to be centered and have the background span across the whole page, and by doing that it needs a lot more code[/QUOTE]

Which is all CSS that you would need to do that stuff I the first place, I don't understand your point at all?

[editline]10th July 2013[/editline]

[QUOTE=Giraffen93;41395972]did you read the whole post?
even when using reset stylesheets it doesn't always transfer right to all browsers

the rendering engine makes pixel perfect fonts impossible[/QUOTE]

That has nothing to do with what we are telling you to do?

[Giraffen93]

[QUOTE=KmartSqrl;41396559]Which is all CSS that you would need to do that stuff I the first place, I don't understand your point at all?

[editline]10th July 2013[/editline]

That has nothing to do with what we are telling you to do?[/QUOTE]

[img]http://f2.braxupload.se/l01ipa.png[/img]

this doesn't look very tidy now, does it?

[rsk_]

[QUOTE=Giraffen93;41396434]I have built communities and cms systems from scratch, so don't tell me i'm lazy.
It's more from the optimization/clean code standpoint.[/QUOTE]

Explain what you mean by optimisation?

[Giraffen93]

[QUOTE=Dorkslayz;41396703]Explain what you mean by optimisation?[/QUOTE]

sure it just takes up a few kilobytes of more code used / ram, but i'm picky about stuff like that.

also, with css only you can't really have it stay there after moving the mouse out, right?

[buhbang]

[QUOTE=Giraffen93;41396739]sure it just takes up a few kilobytes of more code used / ram, but i'm picky about stuff like that.

also, with css only you can't really have it stay there after moving the mouse out, right?[/QUOTE]

because you have your menu the way it is, you can have padding to extend how far the cursor can go before it disappears

[rieda1589]

[QUOTE=Giraffen93;41396656][img]http://f2.braxupload.se/l01ipa.png[/img]

this doesn't look very tidy now, does it?[/QUOTE]

Learn to use CSS selectors properly.

You don't need those divs.

Edit: [url]http://jsfiddle.net/H7Qmn/[/url]

Just toggle the display of the "nav ul ul"s on hover and done.

[Vietnow]

[QUOTE=Giraffen93;41396739]sure it just takes up a few kilobytes of more code used / ram, but i'm picky about stuff like that.[/QUOTE]

A few extra CSS rules aren't going to hurt anyone, and if you can switch to a pure CSS site it means one less HTTP request which will make a much bigger difference.

[QUOTE=Giraffen93;41396739]
also, with css only you can't really have it stay there after moving the mouse out, right?[/QUOTE]

If it's a hover event, the convention is for it to disappear once you move out of the element. If it were a click event, then you would expect it to toggle open/closed.

[Giraffen93]

but it's supposed to stay there after you exited the hover

[KmartSqrl]

[QUOTE=Giraffen93;41397064]but it's supposed to stay there after you exited the hover[/QUOTE]

Do that with JS [B]after[/B] it works with pure css then.

[editline]10th July 2013[/editline]

[QUOTE=Giraffen93;41396656][img]http://f2.braxupload.se/l01ipa.png[/img]

this doesn't look very tidy now, does it?[/QUOTE]

What do you need those extra divs for?

[Giraffen93]

[QUOTE=KmartSqrl;41397317]Do that with JS [B]after[/B] it works with pure css then.

[editline]10th July 2013[/editline]

What do you need those extra divs for?[/QUOTE]

then what's the point?

filling out the sides

[Spero78]

[QUOTE=Giraffen93;41397358]then what's the point?

filling out the sides[/QUOTE]

The point is it will work without javascript, and work better with javascript.

[Giraffen93]

[QUOTE=Spero78;41397404]The point is it will work without javascript, and work better with javascript.[/QUOTE]

i still need it to be filled out at the sides, how would i do that then?

[Vietnow]

[QUOTE=Giraffen93;41397358]then what's the point?

filling out the sides[/QUOTE]

Getting the sub-menu to show is mandatory behaviour and needs to be accessible to everyone (i.e. no JavaScript)
Having the menu stay open is optional behaviour, which you can use JS for.

[rieda1589]

[QUOTE=Giraffen93;41397438]i still need it to be filled out at the sides, how would i do that then?[/QUOTE]

Look at my jsfiddle a few posts up, just 100% width the ul element

or margin auto it if you want the li elements centered

[Shadow801]

[QUOTE=Giraffen93;41396656][img]http://f2.braxupload.se/l01ipa.png[/img]

this doesn't look very tidy now, does it?[/QUOTE]

What's the href data attribute for? Surely you're just going to use an anchor?

Also, am I the only one that thinks this argument is really stupid, because surely it's all so obvious?

[Giraffen93]

[QUOTE=Shadow801;41397664]What's the href data attribute for? Surely you're just going to use an anchor?

Also, am I the only one that thinks this argument is really stupid, because surely it's all so obvious?[/QUOTE]

using it to select the right submenu

[editline]10th July 2013[/editline]

why the hell is our server down?
this has been happening a lot

[Shadow801]

[QUOTE=Giraffen93;41396656][img]http://f2.braxupload.se/l01ipa.png[/img]

this doesn't look very tidy now, does it?[/QUOTE]

This has made me curious, what kind of naming conventions does everybody use?

Currently at my company we're doing IDs in CamelCase and classes in lowercase, which are split by hyphens if they have spaces.

[buhbang]

I started using camelCase I like it, but it feels a bit weird atm. Still getting used to it.

I should have been doing this earlier.

[KmartSqrl]

I like doing my class names like-this, ids-as-well.