Sub-Links

mcdanielnc89 · #1 Nov 18th, 2007, 01:51

Okay,

I've tried researching on this but haven't found anything...

On http://www.newbreedjesusfreaks.com/, I'd like to make some sub-links; as in under the staff link I'd like it to display a few more links UNDER the main link. But i don't want those thinks to show UNLESS I'm on the staff page...

Am I making any sense?

nashultz07 · #2 Nov 18th, 2007, 11:43

To do this you would have to make your menu (on the staff page only) like such:

HTML:

Code: Select all

<div class="menudiv">
<ul id="menutree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
 
<script type="text/javascript">
var menuids=["menutree1"] //Enter id(s) of ul menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>

CSS:

Code: Select all

/*BEGIN MENU*/
.menudiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
 
.menudiv ul li{
position: relative;
}
 
/*Sub level menu items */
.menudiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.menudiv ul li a{
display: block;
overflow: auto; /*force layout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.menudiv ul li a:visited{
color: black;
}
.menudiv ul li a:hover{
background-color: yellow;
}
.menudiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}
 
/* Hack for IE \*/
* html .menudiv ul li { float: left; height: 1%; }
* html .menudiv ul li a { height: 1%; }
/* END */

That should work like you want it.

I got this from my menu links which was from Dynamic Drive's menus.

mcdanielnc89 · #3 Nov 18th, 2007, 18:17

hmm, Altho I thought this was good , it doesn't work.(for me)

take a look.

http://www.newbreedjesusfreaks.com/index.php?page=staff

Aso · #4 Nov 18th, 2007, 18:34

mcdanielnc89, from what I understood on your original post you want the extra navigation to appear directly below the Staff link on the left menu, only when you are on the 'staff' page?

If so, since you are using php, you would want to nest a list within

Code: Select all

<li>
 <a href="index.php?page=staff" id="staffnav" name="staffnav">Staff</a>
</li>

in your code, wrapped in a condition statement that will mean it is only displayed if you are on the staff page, like so;

Code: Select all

<li>
 <a href="index.php?page=staff" id="staffnav" name="staffnav">Staff</a>
 <?php if ((REQUEST['page']) == 'staff') { 
  ?>
  <ul>
   <li>sublink</li>
   <li>sublink</li>
  </ul> 
<?php } ?>
</li>

EDIT: Above code ammended, closing <li> tag should've been outside of php & if statement adjusted to '==' (rather than the incorrect '=')

mcdanielnc89 · #5 Nov 18th, 2007, 19:17

maybe if i attach some code i can understand it better.. my page is setup with php, yes, but, i hace namehere.inc.php and then the namehere.php. the inc file tells the command to open that page when i click it.. here is the main code...

My index..

HTML: Select all

<?php
// check the $_GET['page'] variable
$page = ((isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 'home');
// prevent file browsing
$page=(preg_match('/(\.\.|\/)/i',$page)?'home':$page);
// replace illegal characters
$page = preg_replace('/[^a-zA-Z0-9 \._-]/','',$page);
// check if the requested file exists
$page = (file_exists('./pages/'.$page.'.php') ? $page : 'error');
include('./pages/'.$page.'.inc.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      <?php echo $title; ?>
    </title>
    <meta http-equiv="content-type" content=
    "text/html; charset=us-ascii">
    <meta name="keywords" content="New Breed Jesus Freaks, NewBreedJesusFreaks, new breed jesus freaks, newbreedjesusfreaks, NBJF, nbjf, christian forums, forums, christian chat, chat, games, fellowship, fun">
    <meta name="description" content="New Breed Jesus Freaks is an open hearted community built for all ages. NBJF is a G-Rated, fun community with laughter, encouragement, games, chat, nice people, etc...">
    <link href="includes/style.css" rel="stylesheet" type=
    "text/css">
    <link href="includes/layout.css" rel="stylesheet" type=
    "text/css">
    <link href="includes/menu.css" rel="stylesheet" type=
    "text/css">
  <link href="includes/current.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" href="./images/favicon.ico">
<style type="text/css">
body#home a#homenav,
body#aboutus a#aboutusnav,
body#signin a#signinnav,
body#statementoffaith a#statementoffaithnav,
body#forums a#forumsnav,
body#rules a#rulesnav,
body#chatroom a#chatroomnav,
body#downloads a#downloadsnav,
body#requests a#requestsnav,
body#commandments a#commandmentsnav,
body#staff a#staffnav,
body#motm a#motmnav,
body#puritypledge a#puritypledgenav,
body#links a#linksnav,
body#search a#searchnav,
body#donate a#donatenav,
body#nathaniel a#stafftext,
body#contact a#contactnav { 
 color: #000;
 background: #D6DDE6;
 border-top: 1px solid;
 border-bottom: 1px solid;
 border-left: 1px solid;
 font-weight: bold;
 text-decoration: underline;
}
</style>
<style type="text/css">
body#nathaniel a#stafftext,
body#adam a#stafftext1,
body#kevin a#stafftext2,
body#rachel a#stafftext3,
body#contact a#contactnav { 
 color: #004287;
 border: none;
 background: #fff;
 text-decoration: none;
}
</style>
  <script type="text/javascript" src="includes/show5.js">
</script>
  </head>
  <body id="<?php echo $thisPage; ?>" onload=
  "javascript:show5();">
 <div id="wrapper">
    <div id="inner" class="clearfix">
      <div id="content">
        <div id="header">
          <span id="liveclock" style=
          "position:absolute;right:10px;top:-20px;"></span>
          <img src="images/topbanner.png" alt="Logo" width="100%"
          height="150">
        </div>
        <div id="left">
          <ul id="menu">
            <li>
              <a href="index.php" id="homenav" name=
              "homenav">Home</a>
            </li>
            <li>
              <a href="index.php?page=aboutus" id="aboutusnav"
              name="aboutusnav">About Us</a>
            </li>
            <li>
              <a href="index.php?page=signin" id="signinnav"
              name="signinnav">Monthly Sign-in</a>
            </li>
            <li>
              <a href="index.php?page=statementoffaith" id=
              "statementoffaithnav" name=
              "statementoffaithnav">Statement of Faith</a>
            </li>
            <li>
              <a href="http://www.forums.newbreedjesusfreaks.com"
              id="forumsnav" name="forumsnav">Forums</a>
            </li>
            <li>
              <a href="index.php?page=rules" id="rulesnav" name=
              "rulesnav">Rules</a>
            </li>
            <li>
              <a href="http://www.chat.newbreedjesusfreaks.com"
              id="chatnav" name="chatnav">Chatroom</a>
            </li>
            <li>
              <a href="index.php?page=downloads" id=
              "downloadsnav" name="downloadsnav">Downloads</a>
            </li>
            <li>
              <a href="index.php?page=requests" id="requestsnav"
              name="requestsnav">Requests</a>
            </li>
            <li>
              <a href="index.php?page=commandments" id=
              "commandmentsnav" name="commandmentsnav">Ten
              Commandments</a>
            </li>
            <li>
              <a href="#">Pictures</a>
            </li>
            <li>
              <a href="index.php?page=staff" id="staffnav" name=
              "staffnav">Staff</a>
            </li>
            <li>
              <a href="index.php?page=motm" id="motmnav" name=
              "motmnav">Member of the Month</a>
            </li>
            <li>
              <a href="index.php?page=puritypledge" id=
              "puritypledgenav" name="puritypledgenav">Purity
              Pledge</a>
            </li>
            <li>
              <a href="index.php?page=links" id="linksnav" name=
              "linksnav">Links</a>
            </li>
            <li>
              <a href="index.php?page=search" id="searchnav"
              name="searchnav">Search</a>
            </li>
            <li>
              <a href="index.php?page=donate" id="donatenav"
              name="donatenav">Support Us</a>
            </li>
            <li>
              <a href="index.php?page=contactus" id="contactnav"
              name="contactnav">Contact Us</a>
            </li>
          </ul>
        </div>
        <div id="content2">
          <div id="content3">
            <?php // and include the page
                  include('./pages/'.$page.'.php'); ?>
          </div>
        </div>
      </div>
    </div>
    <div id="m"></div>
  </div>
    <div id="footer">
      <div id="logos">
        <a href=
        "http://validator.w3.org/check?uri=referer"><img src=
        "images/valid-html401-blue.png" alt=
        "Valid HTML 4.01 Strict"></a> <a href=
        "http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css-blue.png"
        alt="Valid CSS!"></a>
      </div><a href="#" style=
      "position: absolute; left: 0; top: -10px;" class=
      "adminlogin" onclick=
      "window.open('http://www.newbreedjesusfreaks.com/cpanel/');">
      Admin Login</a>
      <div id="copy">
        <p>
          Copyright &copy; 2003-2007 <a href="#" class=
          "adminlogin" onclick=
          "window.open('http://www.newbreedjesusfreaks.com/');">New
          Breed Jesus Freaks</a>. All Rights Reserved.
        </p>
        <p>
          Web Design &amp; Development by New Breed Jesus Freaks
        </p>
      </div>
     </div>
  </body>
</html>

my staff page information...

staff.php

HTML: Select all

<div style="text-align: center">
  <img src="images/staff.png" alt=
  "New Breed Jesus Freaks logo">
  <div class="staff">
    <h3>
      (Admin - Nate)
    </h3>
  <a class="thumbnail" href="#thumb"><img src="./images/nathaniel1.jpg" width="100px" height="70px" border="0" /><span><img src="./images/nathaniel1.jpg" /><br /></span></a>
 <ul>
  <li>
  <h4>NBJF Role:
    </h4>
  </li>
 </ul>
    <p class="style6">
      I am the founder of this wonderful Community NBJF. My
      role here is to help each and everyone of the members
      get through tough times and see the bright side of
      life.. I want to see each and everyone of them to have
      a wonderful life and build and maintain a wonderful
      relationship with the Lord JESUS CHRIST!
    </p><a href="index.php?page=nathaniel" title="More info on Nathaniel">►more</a>
  </div>
  <div class="staff">
    <h3>
      (Co-Admin - Adam)
    </h3>
  <a class="thumbnail" href="#thumb"><img src="./images/adam.jpg" width="100px" height="70px" border="0" /><span><img src="./images/adam.jpg" /><br /></span></a>
 <ul>
  <li>
  <h4>NBJF Role:
    </h4>
  </li>
 </ul>
    <p class="style6">
      I would love to help spread the word about Jesus Christ
      among many many teens that have been what I have been
      through!
    </p><a href="index.php?page=adam" title="More info on Adam">►more</a>
  </div>
  <div class="staff">
    <h3>
      (Head Assistant Manager- Kevin)
    </h3>
  <a class="thumbnail" href="#thumb"><img src="./images/kevin.jpg" width="100px" height="70px" border="0" /><span><img src="./images/kevin.jpg" /><br /></span></a>
 <ul>
  <li>
  <h4>NBJF Role:
    </h4>
  </li>
 </ul>
    <p class="style6">
      Head Assistant Manager. My role is to bring people
      closer to God and to have a great attitude about
      bringing someone to Christ! Also To Have Fun With
      Others!
    </p><a href="index.php?page=kevin" title="More info on Kevin">►more</a>
  </div>
  <div class="staff">
    <h3>
      (Assistant Manager - Rachel)
    </h3>
    <a class="thumbnail" href="#thumb"><img src="./images/rachel.jpg" width="100px" height="70px" border="0" /><span><img src="./images/rachel.jpg" /><br /></span></a>
 <ul>
  <li>
  <h4>NBJF Role:
    </h4>
  </li>
 </ul>
    <p class="style6">
      Well I'm an asst. manager here. I think my roll is too
      help out Nate with whatever he needs help with. My role
      is also to answer anyone's questions the best I can or
      direct the questions to Nate if I can't answer them.
    </p><a href="index.php?page=rachel" title="More info on Rrachel">►more</a>
  </div>
</div>

staff.inc.php

HTML: Select all

<?php
$title="New Breed Jesus Freaks :: Staff";
$thisPage="staff";
?>

masonbarge · #6 Nov 19th, 2007, 13:17

If you're coding the page server-side, it's a lot easier to do it with a script than with CSS.

Just put whatever two states of navigation you want inside a conditional based on your $title variable. Say you have a basic style for navigation done by styling the <li> element in your css. Set a second style for a class in the css, say "li.x".

Now say you want to use your basic style for navigation links, but want to use style "x" if you are on the page the link is set to (a common feature):

PHP: Select all


<li   <?php
        if ($title == 'index')    {
                                         echo ' class="x">Index';
                 } else {
                                         echo '><a href="./index.php">Index</a>';
                }
?>
</li>

There may be a small syntax error or two in there, but I'm sure you get the idea.

If this is going to affect every link (or a large number of links) there are shorter ways to code it, than by inserting a long string of "if" clauses. Anyone using OOP would do this automatically. (I mean, there are OOP fanatics who would make this into a class if two links were affected, LOL.)

You can also shorten it in procedural code if someone else is going to be reading the code. If it's for your own site and you don't mind a long string of code, it would be faster just to duplicate the clauses.

Marc · #7 Nov 20th, 2007, 18:48

Why don't you do something as follows (it might work but then it might not!):

HTML: Select all

 <ul id="menu">
            <li>
              <a href="index.php" id="homenav" name="homenav">Home</a>
            </li>
            <li>
              <a href="index.php?page=aboutus" id="aboutusnav" name="aboutusnav">About Us</a>
            </li>
            <li>
              <a href="index.php?page=signin" id="signinnav" name="signinnav">Monthly Sign-in</a>
            </li>
            <li>
              <a href="index.php?page=statementoffaith" id="statementoffaithnav" name="statementoffaithnav">Statement of Faith</a>
            </li>
            <li>
              <a href="http://www.forums.newbreedjesusfreaks.com" id="forumsnav" name="forumsnav">Forums</a>
            </li>
            <li>
              <a href="index.php?page=rules" id="rulesnav" name="rulesnav">Rules</a>
            </li>
            <li>
              <a href="http://www.chat.newbreedjesusfreaks.com" id="chatnav" name="chatnav">Chatroom</a>
            </li>
            <li>
              <a href="index.php?page=downloads" id="downloadsnav" name="downloadsnav">Downloads</a>
            </li>
            <li>
              <a href="index.php?page=requests" id="requestsnav" name="requestsnav">Requests</a>
            </li>
            <li>
              <a href="index.php?page=commandments" id="commandmentsnav" name="commandmentsnav">Ten
              Commandments</a>
            </li>
            <li>
              <a href="#">Pictures</a>
            </li>
            <li>
              <a href="index.php?page=staff" id="staffnav" name="staffnav">Staff</a>
            </li>
<?php if($_GET['page'] == 'staff') {print '<ul class="subnav">
<li>sub item</li>';} ?>
            <li>
              <a href="index.php?page=motm" id="motmnav" name="motmnav">Member of the Month</a>
            </li>
            <li>
              <a href="index.php?page=puritypledge" id="puritypledgenav" name="puritypledgenav">Purity
              Pledge</a>
            </li>
            <li>
              <a href="index.php?page=links" id="linksnav" name="linksnav">Links</a>
            </li>
            <li>
              <a href="index.php?page=search" id="searchnav" name="searchnav">Search</a>
            </li>
            <li>
              <a href="index.php?page=donate" id="donatenav" name="donatenav">Support Us</a>
            </li>
            <li>
              <a href="index.php?page=contactus" id="contactnav" name="contactnav">Contact Us</a>
            </li>
          </ul>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PR4 links for sale...links in an excellent position	agent14	Link Building and Link Sales	4	Sep 19th, 2008 16:09
Msie doesn't make my links links..	delusion	Web Page Design	7	Nov 7th, 2007 08:05
PR 5 Links available for recip links	GARY	Link Building and Link Sales	1	Aug 19th, 2006 09:52
Blured Links (image links)	bruno89	Web Page Design	2	Jul 25th, 2006 14:48
Different coloured links without modifying links?	Webforumz Staff	Web Page Design	12	Aug 29th, 2003 18:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Sub-Links