LiteNBright
LiteNBright
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/
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/
Re: LiteNBright
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
of course this is possible.
Like in the link you posted as example you have to style the horizontal menu using css.
Greetz
intelli
Re: LiteNBright
Hi intelli,
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:
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).
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.intelli wrote:of course this is possible.
Like in the link you posted as example you have to style the horizontal menu using css.
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);
}
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).
Christoph M. Becker – Plugins for CMSimple_XH
Re: LiteNBright
Hi Christoph,
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:Now the menu starts building up from the right. Unfortunately in the wrong order.
Therefore I put into the templateToo 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
works very well.cmb wrote: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).
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;
Therefore I put into the template
Code: Select all
<?php rsort($hc);echo li($hc,1);?>
Any Idea?
svasti
Re: LiteNBright
Christoph M. Becker – Plugins for CMSimple_XH
Re: LiteNBright
I guess I want something different.cmb wrote:on Stackoverflow I found a similar question with an answer. Does that help?
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
Re: LiteNBright
- don't change the float of the <li>'ssvasti wrote:... or is there an easier way?
- 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
Re: LiteNBright
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:
I don't know, if that will work for a drop-down menu, though.
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!
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>
IOW: reordering the pages so that all "blocks" beginning with an <h1> page are reversed:svasti wrote: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)
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();
Just seen that Gert was faster. No wonder: his solution is simpler and better!
Christoph M. Becker – Plugins for CMSimple_XH
Re: LiteNBright
Hallo Gert and Christoph,
thanx very much for your answers.
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 |
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.
I simplified a bit and have now in the template:That's phantastic. Man, it took me some headscratching to understand your code!
Thanks again
svasti
thanx very much for your answers.
the point is the behavior of h2...Gert wrote:Works with a single horizontal h1 menu, but I don't know, what the dropdown h2 menus are doing now ...
...unfortunately it isn't a drop down menüGert wrote:PS: Look here: http://www.kstb.de/tpltestmobile_switch/ -
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 |
I don't see a way of building a horizontal list where the <li>'s itself are vertical lists.cmb wrote:Have you considered to avoid any floating for the toplevel <li>s, but instead making them display:inline-block
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.
Wow, this works!!!cmb wrote:reordering the pages so that all "blocks" beginning with an <h1> page are reversed:
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>
Thanks again
svasti