Making a very simple <DIV> menu

About the template and stylesheet - and changing the menu
Post Reply
ToasterToad
Posts: 2
Joined: Tue Jan 25, 2011 4:50 pm

Making a very simple <DIV> menu

Post by ToasterToad » Tue Jan 25, 2011 5:00 pm

Hi all,
I've searched all around the internet to find answer, but without luck. I know this must be possible in some way, but I'm quite newbie when it comes to php :roll:

What I'm trying to do, is to make a custom toc() function that outputs the menu like this:

<div id="current_page">First Site Page</div> - <a class="menu-link" href="#">Second Site Page</a> - <a class="menu-link" href="#">First Subpage</a> - <a class="menu-link" href="#">Third Site Page</a>
(Note: subpages are shown exactly the same way as top-pages)

Does somebody know if this is possible with some kind of menu extiension, or with what php code this could be achieved?

Thanks in advance :D

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Making a very simple <DIV> menu

Post by Tata » Tue Jan 25, 2011 5:24 pm

1. toc function generates menu as a list (<ul><li>...</li></ul>) What you describe as DIVs with various styles is possible by settings in stylesheet.css. Simply use the same attributes for menulevel1, menulevel2, menulevel3 etc.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

ToasterToad
Posts: 2
Joined: Tue Jan 25, 2011 4:50 pm

Re: Making a very simple <DIV> menu

Post by ToasterToad » Tue Jan 25, 2011 5:33 pm

Tata wrote:1. toc function generates menu as a list (<ul><li>...</li></ul>) What you describe as DIVs with various styles is possible by settings in stylesheet.css. Simply use the same attributes for menulevel1, menulevel2, menulevel3 etc.
The reason why I want it this way, is because I started out making a static site, and am now converting it to a CMSimple_XH template. With the divs everything would be positioned perfectly as the original site, and when I try styling the tables it just won't adjust to the rest of the site :?

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Making a very simple <DIV> menu

Post by Tata » Tue Jan 25, 2011 7:54 pm

ToasterToad wrote:With the divs everything would be positioned perfectly as the original site, and when I try styling the tables it just won't adjust to the rest of the site :?
It has nothing to do either with a table based or DVs based template. With a little knowledge of HTML and CSS you may achieve exactly the same design. Positioning is made while defining position in pixels.
The menu is generated dynamically and that's the role of toc() function. If you prefere another style of TOC (which you think isn't possible to style the standard way) hten you either need to be very good in PHP and rewrite the function, or this CMS is not the one you may use. Have a look on some of available templates and you will sure find one with the menu just as you need.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

designfjord
Posts: 68
Joined: Fri Apr 16, 2010 4:19 pm
Location: Germany/Franconia

Re: Making a very simple <DIV> menu

Post by designfjord » Tue Jan 25, 2011 11:10 pm

I have done a flyout inspired by http://www.cssplay.co.uk. You can see this at http://bomhardschule.cvb-schule.de

In template:

Code: Select all

<!-- <?php  echo toc();  ?> -->
      <div id="navigation">
          <div id="mainnav"><?=li($hc,'menulevel')?></div>
          <br />
	   </div>
In CSS:

Code: Select all

#navigation {width:130px;}
/*Flyout Menü */
div#mainnav ul{margin:0;padding:0;background:#fff;line-height:1.4em;}
div#mainnav li.doc, div#mainnav li.docs {border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid #eee;border-right:1px solid #fff;}
div#mainnav li.docs {background:url(images/arrow.gif) no-repeat right 10px;}
div#mainnav li:hover {z-index:10;border:1px solid rgb(2,169,174);}
div#mainnav li.doc:hover,div#mainnav li.docs:hover {border:1px solid #04AAAF;}
div#mainnav li.sdoc,div#mainnav li.sdocs {border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid rgb(3,204,199);border-right:1px solid rgb(2,169,174);}
div#mainnav li {position:relative;list-style:none;margin:0;line-height: 1.5em;}
div#mainnav li.sdoc {display:block;}
div#mainnav li.sdocs {display:block;}
div#mainnav li.sdocs,div#mainnav li.sdoc {w\idth:125px;}/*hack*/
div#mainnav li a {display:block;padding:3px 0 2px 4px;text-decoration:none;color:#020202;w\idth:125px;}/* hack for IE5.5 */
div#mainnav ul ul {position:absolute;top:1px;display:none;border:1px solid #bbb;background:#fff url(images/menu_bg.jpg) repeat-y top right;}
div#mainnav ul ul ul {background:url(images/menu_bg.jpg) repeat-y top right;}
* html div#mainnav ul ul {left:120px;}/* hack for IE5.x */
* html div#mainnav ul ul {voice-family: "\"}\"";voice-family: inherit;left:130px;}/* hack for IE6 */
div#mainnav ul ul /* */{left:110px;} /* hack for the rest */
div#mainnav ul.menulevel1 li.docs:hover ul.menulevel2,div#mainnav ul.menulevel1 li.sdocs:hover ul.menulevel2,div#mainnav ul.menulevel2 li.docs:hover ul.menulevel3,div#mainnav ul.menulevel2 li.sdocs:hover ul.menulevel3 {display:block;}
div#mainnav ul.menulevel1 li.sdocs:hover ul.menulevel2,* html div#mainnav ul.menulevel2 li.sdocs:hover ul.menulevel3 {margin-left:-4px;voice-family: "\"}\"";voice-family: inherit;margin-left:0px;} /*hack for IE6*/
ul.menulevel1 {z-index:1;background:#F5F6E7;}
ul.menulevel2 {z-index:2;background:#F5F6E7;}
ul.menulevel3 {z-index:3;background:#F5F6E7;}
leberecht.net | keep it simple, or fail

motivenetworks
Posts: 1
Joined: Sun Oct 09, 2011 4:02 am

Re: Making a very simple <DIV> menu

Post by motivenetworks » Sun Oct 09, 2011 4:11 am

Hi and thanks for code with regards to a flyout menu for CMSimple, works great - however, it's messing with the URL for Google indexing, as an example:

When Google indexes your site, Google sees this: (this is a one line extract)
<li class="docs"><a href="/?Internat&PHPSESSID=f73b707260c8144d67d7b65eca94e79d">Internat</a>

when this should read something like this: (it does if I don't use the flyout menu)
<li class="docs"><a href="/?Internat">Internat</a>

This longer confusing looking URL is ending up in Google search results. It looks like to do with PHP and this: "PHPSESSID" - but I'm lost from here.

Any ideas would be greatly appreciated, many thanks for your time.
Peter Flynn
peter at motivenetworks dot com

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Making a very simple <DIV> menu

Post by cmb » Sun Oct 09, 2011 9:02 am

Hi Peter,

the extended URL is neither caused by CMSimple's core nor by the flyout menu, but is a result of an installed plugin which uses a PHP session, and certain PHP settings (session.use_cookies, session.use_trans_sid). I've seen that there are no plugins installed on your website, so this should be no problem at all.

But if it were, you could use ge_canonical_XH, which will insert a canonical link tag to the page with an url that's stripped of all additional query parameters such as PHPSESSID.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply