dynamic breadcrumb with sub-menu navigation

[sammer021486]

I need some help with developing a breadcrumb trail/menu. I am currently using php scripts to call my menu to the currently viewed page. Due to my menu being so large and wanting to keep all of the content on one screen size, without using vertical scroll bars. I have decided it would be nice to develop a breadcrumb trail, with the ability to be dynamic and provide the menu interface.

As I only started developing web pages in Jan 2010, I have limited knowledge on how to do this.

WOWHEAD has a very good example of how I would like my trail to look

Here is an html and css example that I have that demonstrates the look of the menu.

I would like to use the page's url location to be displayed in the trial, and not the path or attribute.

<div class="breadcrumb">
        <p><span>You are here:&nbsp;&nbsp;</span></p>
    <ul>
        <li><a href="/som/">Home</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
   
        <li><a href="#">1</a>
            <ul>
                <li><a href="#">1.1</a></li>
                <li><a href="#">1.2</a></li>
            </ul>
        </li>
        
        <li><a href="#">1.1</a>
            <ul>
                <li><a href="#">1.1a</a></li>
                <li><a href="#">1.1b</a></li>
            </ul>
        </li>
        
        <li class="last">1.1a</li>
        
</ul>
</div>

The css for the example

.breadcrumb  {
float : left;
margin : 0;
padding : 2px 8px 2px 8px;
width : 956px;
color : #080808;
background : #ededed;
position : relative;
z-index : 10;
font-size : 11px;
}
.breadcrumb span {
color : #264e84;
font-weight : bold;
}
.breadcrumb p {
padding : 5px 0 0 0;
margin : 0;
float : left;
}
.breadcrumb ul {
list-style-type : none;
padding : 0;
float : left;
margin : 0;
display : inline-block;
width : 876px;
}
.breadcrumb ul li {
display : block;
float : left;
margin : 0;
position : relative !important ;
background : url('breadcrumb.gif') no-repeat right 3px;
padding : 5px 23px 5px 10px;
}
.breadcrumb ul li a {
padding-bottom : 5px;
text-decoration : none;
color : #000;
}
.breadcrumb ul li ul {
display : none;
float : left;
position : absolute !important ;
z-index : 100;
width : 191px;
}
.breadcrumb ul li ul li, #breadcrumb ul li ul li:hover {
padding : 0;
margin : 0;
background : none;
}
.breadcrumb ul li ul li {
display : block;
float : none;
clear : both;
border : 1px solid #ededed;
border-width : 0 1px;
}
.breadcrumb ul li:hover {
background : #dcdcdc url('breadcrumb_down.gif') no-repeat right 3px;
}
.breadcrumb ul li:hover ul {
display : block;
position : absolute;
z-index : 5;
left : 0;
top : 23px;
margin : 0;
padding : 3px 0 0 0;
border : 1px solid #ededed;
border-width : 0 0 1px 0;
}
.breadcrumb ul li ul li a {
display : block;
background : #fff;
color : #6e6e6e;
padding : 5px;
text-decoration : none;
width : 179px;
}
.breadcrumb ul li ul li a:hover {
text-decoration : none;
background : #dcdcdc;
}
.breadcrumb ul li.last, #breadcrumb ul li.last:hover {
background : none !important ;
}

My actual unordered list menu looks similar to this

<ul>
 <li>HOME
  <ul>
   <li><a href="#">1</a>
    <ul>
     <li><a href="#">1.1</a>
      <ul>
       <li><a href="#">1.1a</a></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

[diafol]

I don't think your two menus relate. The first has no common structure with the second. The second is nested, whereas the first is not (well not in the same way).

You can use a DB to store:

nav_id (autoincrement/PK)
label (displayed text on menu)
url (optional)
parent_id (0 = top level item, all else subitems of parent via 'nav_id')
rank_order (integer to place order - optional field)

You'll need a recursive function to build the dropdown breadcrumb trail. You could reference the current page url againt the 'url' in the DB and work backwards.

1. get page url and get the item fields from DB.
2. the label goes at the end of the breadcrumb - no to build a link for this coz you're on the page already.
3. search the parent for children (search for common parent_id from '1.'). Store these (label and links data) for the dropdown of the parent.
4. get the parent data (search the nav_id for parent_id) - and place this in the breadcrumb prior to the current page:

parent > current_page
[children V]

5. Repeat the process until you get to parent_id = 0.

That's one way - but it's a little intensive.

[sammer021486]

I don't think your two menus relate. The first has no common structure with the second. The second is nested, whereas the first is not (well not in the same way).

The first menu was something that I quickly made up to show how I would like the final result to appear, it has no relevance, other than to demonstrate the look of the menu I would like to create.

The nested menu is the menu that I will be working with, but as it stands right now. The only way that I understand to make the breadcrumb trail is to create a custom breadcrumb list on every single page, but that is way too work intensive to maintain.

So I have been searching for examples on how to create this breadcrumb trail/menu combo, but thought that I would also ask for assistance, as I have yet to find examples or tutorials on how to achieve this look.