Members area of website with different menu

[mdemaree99]

New to the websitebaker groups and love the ease of use for building / designing a website.  However I am running into issues with having a members section of the website.  Ideally it will have its own background/layout and menu links.  When I originally tried this I was able to hide the members section from the public view, but when I applied a members template the new links showed up(as well as public menu).  I see 2 approaches, but not sure if there is a best way to either one.  Also.. Would like to add current date and Members Login link on top right.  Can see this being the same on both with a link back to Public Site if on the members page… Any inputs or comments?    Also.. attached is quick view of what I am wanting public side to look like.. just haven't added the date or links on top right.

Approach 1:

- Public
  -- PG1
  -- PG2
  -- PG3
  ----PG3A
  ----PG3B

- Members Area
  -- MbrPG1
  -- MbrPG2
  -- MbrPG3
  ----MbrPG3A
  ----MbrPG3B

Approach 2:

- Public
  -- PG1
  -- PG2
  -- PG3
  ----PG3A
  ----PG3B
  --PG4 / Member Login
  ---- MbrPG1
  ---- MbrPG2
  ---- MbrPG3
  ------MbrPG3A
  ------MbrPG3B

[Argos]

I'm not sure if I understand the problem... This is how you should create a public section and a member section.
1. Create a member groups and some members in the Site Settings.
2. Create a public section (let's call it Section A), and a member section (let's call it Section B) in your pages index.
3. Set Section B to be visible for members, through the page settings
4. That's it. If you're not logged in you see Section A, if you're logged in you see both section A and Section B.

If you want to have section B to look differently, just use another template for those pages. It just should look like:

- Home
- Section A
- Section B

So you probably need 3 templates: 1 for the homepage and 1 for each main section. Use the same menu call in each template. So don't use multiple menus. But if you want to hide the menu for Section A, when logged in, then use the code below to show or hide it according to logged in status. Or just use 2 separate menus.

Now, the login link. Have a look at the login droplet:
http://www.websitebakers.com/pages/droplets/official-library/other/login-form.php
Put that in a separate page and a login/logout form will appear. Just link to that page from the top right with the code:

Code:

<?php
if(FRONTEND_LOGIN AND $admin->is_authenticated()) {
echo "<a href=\"";
echo LOGOUT_URL;
echo "\">Log out &raquo;</a>";
}
else echo "<a href=\"your_link_to_the_login_page\">Log in &raquo;</a>";
?>

It will show a login link if not logged in, and a log out link if logged in. Or use it to link back to the public section like you wrote (not user friendly in my opinion).

[mdemaree99]

Thanks for the info on the login...

To clarify a little bit.
I am trying to have separate menu's or public and members.
In your case.. I would like to only show section B links when in members section.

After playing with it over the weekend I am having a Section A and Section B with pages under each section.  I use a show_menu2 function that only lists Public and Members at the top right to easily bounce back between the two sections.  Along with a second show_menu2 function to list the sub pages.  Just needing to convert it from only showing 1 level to a drop down menu.  I am still trying to get a good understanding on the show_menu2 function and how to do dropdown.

My big concern now is... Has anybody dealt with the glassberry template?  I tweaked it and got it to look exactly the way I needed it.  Hover.. When I put a a link it adds  >> before the image or word.  

[mdemaree99]

FYI.. found the problem on the glassberry template. 
The >> comes from the template adding a gif image on all links.

[Bug]

Install firebug (firefox addon) and learn how easy it is to see why what does what and how it can be changed

[Argos]

Working with show_menu2 can be daunting that's for sure. Here's a call from + HTML one of my sites that uses a (jQuery) dropdown menu:

Code:

<div id="topnav">
      <div id="myslidemenu" class="jqueryslidemenu">
        <?php show_menu2(0,SM2_ROOT,SM2_START+2,SM2_ALL,'<li>[a][menu_title]</a>','</li>','<ul>','</ul>',false,false) ?>
      </div>
 </div>

Here's the CSS:

Code:

/* TOP NAVIGATION */
#topnav {float:left;width:100%;background:#404040;}
#topnav ul {list-style-type:none;margin:0;padding:0;}
#topnav ul li {list-style-type:none;margin:0;padding:0;background:#404040;border-left:1px solid #666;}
#topnav ul li.active {background:#666;}
#topnav ul li a {color:#fff;}
#topnav ul li a:hover {background:#666;}
#topnav ul li li {padding:0;border:none;}

/*Top level list items*/
.jqueryslidemenu ul li {
position:relative;
display:inline;
float:left;
z-index:100;
font-size:13px;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a {
display:block;
padding:10px 15px 10px 15px;
text-decoration:none;
}

* html .jqueryslidemenu ul li a {/*IE6 hack to get sub menu links to behave correctly*/
display:inline-block;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul {
position:absolute;
left:0;
top:25px !important;
display:block;
visibility:hidden;
padding:0 !important;
padding-top:15px !important;
margin-left:-1px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {display:list-item;float:none;border:none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
left:191px !important;
top:-1px !important;
padding-top:0 !important;
border-top:solid 1px #e3e3e3;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
width:160px;/*width of sub menus*/
padding:6px 15px;
margin:0;
border-top-width:0 !important;
background:#404040; /*background of sub level (default state)*/
}
.jqueryslidemenu ul li ul li a:hover {background:#666;} /*background of sub level (hover state)*/

.jqueryslidemenu ul li ul li li a {border-width:0 1px 1px 1px;}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass {position:absolute;top:17px;right:16px;}
.rightarrowclass {position:absolute;top:12px;right:5px;}

And the jQuery lines that should be in the HEAD of your template:

Code:

<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
register_frontend_modfiles('jquery');
register_frontend_modfiles('js');
} 
?>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jqueryslidemenu.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jquery.easing.1.3.js" ></script>

Use the attached files. In file jqueryslidemenu.js change the lines in the top to your own domain and template names.