Newbie question about Editable pages in TP

[espressoguy]

I'm having lots of trouble understanding the menu manager at all.  I can't even see how it affects any menu anywhere.  When I click "home" there doesn't seem to be any link to the newly-created page anywhere regardless of what I do in menu manager; I've just spent a half hour fiddling with this one feature and trying to find an explanation of it anywhere in the docs or forums.

However, I was really asking about the kind of navigation that JPdeni has implemented in his morethanspike.com site.  I'm sure I could figure out how to make all that work if the pages were static but with pages in a a database, I wouldn't understand where to point the menu links (If I understand correctly that JPdeni implemented his navigation manually and not through the menu manager)

Thanks for the help guys!   
(note: on this demo install, I'm running TPv0.9.8 with SMF 1.1.5 - should I tear-out the install and back the SMF down to 1.1.4?)

[JPDeni]

should I tear-out the install and back the SMF down to 1.1.4

No.

that JPdeni has implemented in his morethanspike.com site

That would be "her morethanspike.com site". The woman in my avatar is me. The man is the actor that my site is about.

The pages that you create via the article system each have a URL. That's what you use in your menu.

I got my menu structure from http://www.cssplay.co.uk/index.html and is a combination of css and html -- the html being in the index.template.php file. I replaced the template_menu function with my own code, using the pattern that I found at CSSplay.

I don't know if it'll help, but I'll post the code for my menu and you might be able to see how it all works.

Code Select Expand


function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '<div class="menu">

<ul>
<li><a href="', $scripturl, '">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?board=19.0" title="Announcements archive">Announcements</a></li>
<li><a href="', $scripturl, '?page=1" title="All about the site">About</a></li>
<li><a href="', $scripturl, '?page=2" title="What is here and how to find it">Site map</a></li>
<li><a href="', $scripturl, '?page=3" title="Who runs things">Staff</a></li>
    <li><a href="', $scripturl, '?action=mlist" title="Our community">Member List</a></li>
<li><a href="http://www.livejournal.com/~morethanspike" title="Offline site information">LiveJournal</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?action=forum">Forums<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>';
  if ($context['user']['is_logged'])
  {
    echo '

<li><a href="', $scripturl, '?action=unread">', $txt['tp-unread'], '</a></li>
        <li><a href="', $scripturl, '?action=unreadreplies">', $txt['tp-replies'], '</a></li>
        <li><a href="', $scripturl, '?action=profile;u='.$context['user']['id'].';sa=showPosts">'.$txt['tp-showownposts'].'</a></li>
<li><a href="', $scripturl, '?action=bookmarks">Show Bookmarks</a></li>';
  }
  echo '
        <li><a href="', $scripturl, '?action=search">Search</a></li>
        <li><a href="', $scripturl, '?board=20.0">Rules</a></li>
        <li><a href="', $scripturl, '?action=help">Help</a></li>
        <li><a href="', $scripturl, '?board=12">FAQ</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=23">James<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
            <li><a href="', $scripturl, '?page=4">Biography</a></li>
            <li><a href="', $scripturl, '?page=5">Timeline</a></li>
            <li><a href="', $scripturl, '?page=6">Articles</a></li>
            <li><a href="', $scripturl, '?page=7">Images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=10">Features<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?cat=35">Bleedathons<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
                  <li><a href="', $scripturl, '?page=11">2003 Bleedathon</a></li>
                  <li><a href="', $scripturl, '?page=12">2004 Bleedathon</a></li>
                  <li><a href="', $scripturl, '?page=13">2005 Bleedathon</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=24">Toys and Games<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
                  <li><a href="', $scripturl, '?page=14">Paper Doll</a></li>
                  <li><a href="', $scripturl, '?page=16">OmniSlide</a></li>
                  <li><a href="', $scripturl, '?page=17">Easy Concentration</a></li>
                  <li><a href="', $scripturl, '?page=18">Hard Concentration</a></li>
                  <li><a href="', $scripturl, '?page=19">Word Search</a></li>
                  <li><a href="', $scripturl, '?page=20">Quizzes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?cat=39">Shop<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
                  <li><a href="', $scripturl, '?page=15">Zazzle</a></li>
                  <li><a href="', $scripturl, '?page=28">Dresden</a></li>
                  <li><a href="', $scripturl, '?page=30">Amazon</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?action=calendar">Calendar</a></li>
<li><a href="', $scripturl, '?page=8">Links</a></li>';
  if ($context['user']['is_guest']) {
    echo ' 
<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>
<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';
  }
    if ($context['allow_admin']) {
    echo '
    <li><a href="', $scripturl, '?action=admin">Admin<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>';
      if ($GLOBALS['user_info']['groups'][0] == 1)
        echo '<li><a href="index.php?action=tpadmin;sa=blocks">Block Manager</a></li>';
      echo '<li><a href="index.php?action=tpadmin;sa=articles">Article Manager</a></li>';
      if ($GLOBALS['user_info']['groups'][0] == 1)
        echo '<li><a href="index.php?action=viewErrorLog;desc">Error Log</a></li>';
      echo '<li><a href="http://webmail.morethanspike.com/src/login.php" target="_blank">Webmail</a></li>';
echo '
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

    ';
  }
  echo '
</ul>';

echo '</div>';

}


I also moved the line

Code Select Expand


template_menu();


to put the menu up at the very top of the page instead of below the banner.

And then I added this to style.css:

Code Select Expand


/* Menu */

/* style the outer div to give it width */
.menu {font-size:0.85em;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:3em;}

/* style the sub-level lists */
.menu ul ul {width:15em;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:3em;line-height:3em;}

/* style the sub level list items */
.menu ul ul li {display:block;width:12em;height:auto; line-height:1em;}

/* style the links for the top level */
.menu a, .menu a:visited {
  display:block;
  float:left;
  height:100%;
  font-size:1em;
  text-decoration:none;
  padding:0 3em 0 1em;
  border:1px solid;
  }

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;width:12em;height:100%;line-height:1em; padding:0.5em 1em;}
* html .menu ul ul a, * html .menu ul ul a:visited  {width:14em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:1px; top:0; width:0; height:0; font-size:1em; z-index:1;}


/* style the level hovers */
/* first */
* html .menu a:hover {position:relative; z-index:100;}
.menu li:hover {position:relative;}
/* second */
* html .menu ul ul a:hover{position:relative; z-index:110;}
.menu ul ul li:hover {position:relative;}
/* third */
* html .menu ul ul ul a:hover {position:relative; z-index:120;}
/* fourth */
.menu ul ul ul ul a:hover {position:relative; z-index:130;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:2.5em;left:0;width:14em;}

/* position the third level flyout menu */
.menu ul ul ul{left:12em;top:0;width:14em;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding-bottom:3em;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}


And I have another .css file that I use with the colors in it.

Code Select Expand



/* Menu */


/* remove all the bullets, borders and padding from the default list styling */
.menu ul {background:#6E8189;}

/* style the links for the top level */
.menu a, .menu a:visited {color:#fff;background:#6E8189; border: #000; text-decoration:none;}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {background:#A1B9BE; color:#000; text-decoration:none;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#A1B9BE; text-decoration:none;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#A1B9BE; text-decoration:none;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:#A1B9BE; text-decoration:none;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:#E6EDEE;}

/* style the level hovers */
/* first */
* html .menu a:hover {color:#000;background:#A1B9BE; text-decoration:none;}
.menu li:hover {position:relative;}
.menu :hover > a {color:#000;background:#A1B9BE; text-decoration:none;}
/* second */
* html .menu ul ul a:hover{color:#000;background:#E6EDEE;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#000;background:#E6EDEE; }
/* third */
* html .menu ul ul ul a:hover {background:#E6EDEE; text-decoration:none; }
.menu ul ul ul :hover > a {background:#E6EDEE; text-decoration:none;}
/* fourth */
.menu ul ul ul ul a:hover {background:#E6EDEE;  text-decoration:none;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{background:transparent url(images/trans.gif);}



I have the .css separated because of other things I do with the theme.

All of this is theme stuff.

[espressoguy]

That would be "her ..."

Oops!   

The pages that you create via the article system each have a URL. That's what you use in your menu. 

Oh ...that makes it easy!  Thanks for telling me that Deni!  Between the code and info you provide and recent study, I'm starting to get the picture.     

[espressoguy]

One more question for JPDeni:

Deni, Do I understand correctly that on your morethanspike.com site, if you add a page (an "Article") through TP, and you want to be able to navigate to this new page using the hierarchical system that you have coded, you have to go in and manually add the code to pick up that new page in your hand-coded menu  ...right?

[JPDeni]

Right.

I could probably have developed some sort of interface for a menu, but it's not like it's something I would be likely to change often so I didn't bother.

[espressoguy]

Thanks alot JPDeni.  I tried out your code for the menu.  It worked great!!