LiteNBright

[twc]

LiteNBright
http://www.dotcomwebdesign.com/demos/litenbright/

How can i make a horizontal dropdown menu
Can there be a version how have horizontal dropdown menu please ?

like thise (demo)
http://sperling.com/examples/menuh/

[intelli]

Hi,

of course this is possible.
Like in the link you posted as example you have to style the horizontal menu using css.


Greetz

intelli

[cmb]

Hi intelli,

of course this is possible.
Like in the link you posted as example you have to style the horizontal menu using css.

Well, not quite. For one thing, the LitenBright Template uses toc(1) to display the main menu, so only the toplevel pages will be shown there (navigation to subpages is possible only through the submenu). But even if toc(1) is replaced by toc(), the horizontal drop-down menu is not fully functional, as the subpages of not selected toplevel pages are not emitted to the html.

To have the complete lists of pages (as in the sitemap) one has to use a replacement for toc(); some can be found on http://cmsimplewiki.com/doku.php/addons/start. I came up with a very simple variant the day before yesterday:

Code: Select all

function mytoc() {
    global $cl;
    for ($i = 0; $i < $cl; $i++) {
        if (!hide($i)) {$ta[] = $i;}
    }
    return li($ta, 1);
}
 

This ignores $cf['hidden']['pages_toc'], which was introduced by CMSimple_XH 1.5, though.

Christoph

PS: By chance I just found out that $hc is still available (I thought it was completely removed after CMSimple 2.8). So instead of mytoc() you can use li($hc, 1) (not tested, but should give the same result).

[svasti]

Hi Christoph,

PS: By chance I just found out that $hc is still available (I thought it was completely removed after CMSimple 2.8). So instead of mytoc() you can use li($hc, 1) (not tested, but should give the same result).

works very well.
But, alas, I have a particularly challenging problem:

A right aligned drop down menu.

I have already spend the better part of the night trying to find a solution...
That's how far I have gotten:

Code: Select all

.nav ul.menulevel1 li {
    display: block;
    float:right;

Now the menu starts building up from the right. Unfortunately in the wrong order.

Therefore I put into the template

Code: Select all

<?php rsort($hc);echo li($hc,1);?>

Too bad, looked nice at first, but all second level pages were listed under the wrong first level page. So the sorting of $hc is the problem, I need the first level pages sorted in reverse order, but not the other pages. I experimented with usort and $l[$hc] to select the menulevel, but couldn't come up with a solution yet.
Any Idea?
svasti

[cmb]

Hi svasti,

on Stackoverflow I found a similar question with an answer. Does that help?

Christoph

[svasti]

on Stackoverflow I found a similar question with an answer. Does that help?

I guess I want something different.

Usually the first menu line of a horizontal drop down menu looks like this:

| Start | Page2 | Page3 |________________________|
adding Page4 =>
| Start | Page2 | Page3 |Page4|__________________|

What I however need is:

|________________________| Start | Page2 | Page3 |
adding Page4 =>
|__________________| Start | Page2 | Page3 |Page4|

The problem is, each level1 entry is a float and in the right aligned menu the first entry is the rightmost float.
Let's say, I have a site with 8 pages with the structure (pagenumber/menulevel):
0/1, 1/1, 2/2, 3/2, 4/1, 5/1, 6/2, 7/1 (pages 0, 1, 4, 5, 7 appear in the horizontal menu)

I would need to convert this to
7/1, 5/1, 6/2, 4/1, 1/1, 2/2, 3/2, 0/1 so that the same pages appear in the horizontal menu, the menu being stacked from the right)

At least so far my thinking goes... or is there an easier way?

svasti

[Gert]

... or is there an easier way?

- don't change the float of the <li>'s
- give ul.menulevel1 no width
- give ul.menulevel1 => float:right;

Works with a single horizontal h1 menu, but I don't know, what the dropdown h2 menus are doing now ...

Gert

PS: Look here: http://www.kstb.de/tpltestmobile_switch/ - use the template switcher (float_left <=> float_right)

Just changed the float of ul.menulevel1

[cmb]

Ah, now I understand! My knowledge of PHP is way better than that of CSS, but nonetheless, I somehow intuitively feel, that a pure CSS solution is preferable and should be possible. Have you considered to avoid any floating for the toplevel <li>s, but instead making them display:inline-block and set text-align on the toplevel <ul>, e.g. like so:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>title</title>
    <style>
        #nav {list-style: none; background: green; width: 90%; border:1px solid black;text-align:right}
        #nav li {display:inline-block; width:100px; border:1px dashed black}
    </style>
</head>
<body>
    <ul id="nav">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>
</html>

I don't know, if that will work for a drop-down menu, though.

I would need to convert this to
7/1, 5/1, 6/2, 4/1, 1/1, 2/2, 3/2, 0/1 so that the same pages appear in the horizontal menu, the menu being stacked from the right)

IOW: reordering the pages so that all "blocks" beginning with an <h1> page are reversed:

Code: Select all

function reordered_hc()
{
    global $hc, $l;
   
    $res = array(); $start = 0;
    for ($i = 0; $i < count($hc); $i++) {
        if ($l[$hc[$i]] == 1) {
            array_splice($res, 0, 0, array_slice($hc, $start, $i-$start));
            $start = $i;
        }
    }
    array_splice($res, 0, 0, array_slice($hc, $start, $i-$start));
    return $res;
}

$hc = reordered_hc(); 

Please note, that hc() is defined only after the plugin loading process, so this neither can't be done in a plugin nor in userfuncs.php; it's best to put it in the template (or include it from there). And please note, that I've tested this only roughly, so it might be buggy.

Just seen that Gert was faster. No wonder: his solution is simpler and better!

[svasti]

Hallo Gert and Christoph,

thanx very much for your answers.

Works with a single horizontal h1 menu, but I don't know, what the dropdown h2 menus are doing now ...

the point is the behavior of h2...

PS: Look here: http://www.kstb.de/tpltestmobile_switch/ -

...unfortunately it isn't a drop down menü

As far as I understand, a horizontal css drop down menu consist of vertical lists stacked horizontally as floats.
The h2 etc. then are made invisible, to become visible on :hover.

I started with having the 1st and 2nd level visible:

| Start | Page2 | Page3 | Page4 |
| Sub-1| Sub-1 | Sub-1 | Sub-1 |
| Sub-2| Sub-2 | Sub-2 |
| Sub-3| Sub-3 |

Have you considered to avoid any floating for the toplevel <li>s, but instead making them display:inline-block

I don't see a way of building a horizontal list where the <li>'s itself are vertical lists.

If you go through the internet, you often encounter horizontal drop down menus, but they are always left aligned.
(However I did once a centered horizontal drop down menu with javascript)
A right aligned css horizontal drop down menu I have never ever seen on the web.

reordering the pages so that all "blocks" beginning with an <h1> page are reversed:

Wow, this works!!!
I simplified a bit and have now in the template:

Code: Select all

<div class="nav">
<?php 
$res = array(); $start = 0;
    for ($i = 0; $i < count($hc); $i++) {
        if ($l[$hc[$i]] == 1) {
            array_splice($res, 0, 0, array_slice($hc, $start, $i-$start));
            $start = $i;
        }
    }
    array_splice($res, 0, 0, array_slice($hc, $start, $i-$start));
echo li($res,1);?>
</div>

That's phantastic. Man, it took me some headscratching to understand your code!

Thanks again
svasti