visible invisible menu items

[dante123]

This is my "left menu" it appears as an include in all the pages:

    <?php
    // array of pages for the left menu
    $left_menu_items = array(
    'book.php' => 'Book Design',
    'identityDesign.php' => 'Identity Design',
    'logos.php' => 'Logos',
    'packaging.php' => 'Packaging',
    'index.php' => 'Selected Projects',
    );
    // start the html string for menu
    $l_menu = ' <ul>';
    // add all the ittems from the $top_menu_items array
    foreach($left_menu_items as $url => $text) {
    if($script_name == $url) {
    // if the item in the array is the current page, highlight it
    $l_menu .= '<li><a style="font-color:#eb0089" href="#nogo">'. $text . ' </a></li>';
    } else {
    // else display it as usual link
    $l_menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
    }
    }
    $l_menu .= '</ul>';
    echo $l_menu;
    ?>

how can i show or hidden submenu items?
For example if someone clicks on Book Design it opens a page (the book design page) with:
1) the Book Design list item in red
2) the Book Design submenu items
3) the submenu should behave as the "left menu" behaves: if i click on one of the items they open a detail page with the item title in the menu in red
4) if i click on "Identity Design" all the "Book Design" items disappear and i can see the "Identity Design" subitem instead
if someone can help it will be great - thanks

This sounds like a job for an accordion. Have a look here - http://jqueryui.com/demos/accordion/#default - is that the sort of thing you were thinking about?
Obviously the example on the page just shows text, but it could be a list of submenu items

[dante123]

thanks but this isn't an accordion we should see something like this:

.Book Design (in red)
.Identity Design
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.book 1
.book 2
.book 3
.book 4

if we click on Identity design we will see:

.Book Design
.Identity Design(in red)
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.Identity 1
.Identity 2
.Identity 3
.Identity 4

and if we click on "Identity 1" it opens the following page and behaves like this:

.Book Design
.Identity Design(in red)
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.Identity 1(in red)
.Identity 2
.Identity 3
.Identity 4

Ok, I get it now. Sorry I's confoozed! Will be back- watchin a movie at the moment. If anybody else wants to contribute in the meantime - fine.

Ok, here's an example that uses the 'parent' method of storing navigation items in a DB. It's a bit rough, but if seems to work:

<?php
    //YOUR DB CONNECTION - here
    $link = mysql_connect('localhost','root','');
    if (!$link) {
        die('Not connected : ' . mysql_error());
    }
    $db_selected = mysql_select_db('daniweb', $link);

    //Get page url
    $page = basename($_SERVER['PHP_SELF']);

    //Set nav vars  
    $sidenav = "";
    $parentnav = "";

    //Find out what type of page this is - primary nav or secondary nav
    $r = mysql_query("SELECT * FROM pages WHERE page_url = '$page' LIMIT 1");
    if(mysql_num_rows($r) == 1){
        $d = mysql_fetch_assoc($r);

        if($d['parent'] == 0){
            $mode = 'parent';
            $parent_id = $d['id'];
        }else{
            $mode = 'side';
            $parent_id = $d['parent'];
            $side_id = $d['id'];
        }

        $r = mysql_query("SELECT * FROM pages WHERE parent = 0 OR parent = $parent_id ORDER BY parent, ordered");
        if(mysql_num_rows($r)>0){
            while($d2 = mysql_fetch_assoc($r)){
                //SIDE
                if($d2['parent'] != 0){
                    $class = ($mode == 'side' && $side_id == $d2['id']) ? ' class = "selected"' : '';
                    $sidenav .= "\n\t<li$class><a href=\"{$d2['page_url']}\" title=\"{$d2['page_desc']}\">{$d2['page_label']}</a></li>";
                }else{
                //PARENT                        
                    $pclass = ($parent_id == $d2['id']) ? ' class = "selected"' : '';
                    $parentnav .= "\n\t<li$pclass><a href=\"{$d2['page_url']}\" title=\"{$d2['page_desc']}\">{$d2['page_label']}</a></li>";
                }
            }
        }
    }else{
        echo "error this page doesn't exist apparently!";   
    }

?>

<style>
    .selected{
        color: red; 
    }
</style>

<ul id="parentnav">
    <?php echo $parentnav;?>
</ul>
<ul id="sidenav">
    <?php echo $sidenav;?>
</ul>

You can use this as an include file in all your pages - it probably has to be split up - php before all html then include the navigation html where required in the page.

This works off a DB structure for pages:

id           int(10) unsigned NOT NULL   [primary key]
page_url     varchar(25) NULL  [just the page eg. index.php, books.php]
page_label   varchar(30) NULL  [the navigation label e.g. Books]
page_desc    varchar(30) NULL  [description for title attribute]
parent       int(11) NULL      [relates to the id of the parent item - if it's a parent itself - set to 0]
ordered      tinyint(4) NULL   [for ordering the items in the navigation]

Use it, play with it or ignore it. :)

[lps]

What I would have done is assign a .current class to the current menu and use css to display it:

foreach($left_menu_items as $url => $text) {
    // if the item in the array is the current page, highlight it
    if($script_name == $url) {
        $class = 'class="current"';
        $href = '#nogo';
    }else{
        $class = '';
        $href = $url;
    }
    $l_menu .= '<li '.$class.'><a href="'.$href.'">'. $text . ' </a>';
    if(!empty($submenu[$url])){//$submenu[$url] is an array to store all your submenus  of current url
        $l_menu .= '<ul>';
            foreach($submenu[$url] as $suburl => $subtext){
                if($sub_script_name == $suburl) {
                    // if the item in the array is the current page, highlight it
                    $l_menu .= '<li class="current"><a href="#nogo">'. $text . ' </a></li>';
                } else {
                    // else display it as usual link
                    $l_menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
                }
            }
        $l_menu .= '</ul>';
    }
    $l_menu .= '</li>';
}

CSS:

.current a{
    font-color:#eb0089;
}

li ul{
    display: none;
}

.current ul{
    display: block;
}

*these codes are not tested

[dante123]

hi
thanks for your help but i'm not using a database
in the second example where do i see all the submenu items and where i tell them to disappear?

[lps]

@dante123 You have assigned your main menu using:

 $left_menu_items = array(
    'book.php' => 'Book Design',
    'identityDesign.php' => 'Identity Design',
    'logos.php' => 'Logos',
    'packaging.php' => 'Packaging',
    'index.php' => 'Selected Projects',
    );

You can use the same method to assign the submenu:

 $submenu = array(
    'book.php' => array('book1.php' => 'Book 1','book2.php','Book 2');
    );

These codes actually did not vanish the submenu, CSS does it all by hiding the submenu from user by display:none;

[dante123]

Like this? Everything is hidden also the main menu

<?php
    // array of pages for the left menu
    $left_menu_items = array(
    'book.php' => 'Book Design',
    'identityDesign.php' => 'Identity Design',
    'logos.php' => 'Logos',
    'packaging.php' => 'Packaging',
    'index.php' => 'Selected Projects',
    );

    // array of pages for the book submenu
    $submenu_book = array(
    'book1.php' => 'Name of the book',
    'book2.php' => 'Name of the book',
    'book3.php' => 'Name of the book',
    'book4.php' => 'Name of the book',
    'book5.php' => 'Name of the book',
    'book6.php' => 'Name of the book',
    'book7.php' => 'Name of the book',
    'book8.php' => 'Name of the book',
    'book9.php' => 'Name of the book',
    'book10.php' => 'Name of the book',
    'book11.php' => 'Name of the book', 
    'book12.php' => 'Name of the book', 
    'book13.php' => 'Name of the book', 
    'book14.php' => 'Name of the book', 
    'book15.php' => 'Name of the book', 
    'book16.php' => 'Name of the book', 
    );

    // array of pages for the book1 submenu
    $submenu_book1 = array(
    'book1_1.php' => '2011/12',
    'book1_2.php' => '2010/11',
    'book1_3.php' => '2009/10',
    'book1_4.php' => '2008/9',
    'book1_5.php' => '2007/8',
    'book1_6.php' => '2006/7',
    );

     // array of pages for the book5 submenu
    $submenu_book5 = array(
    'book5_1.php' =>'Street Space',
    'book5_1.php' =>'Bicycle Traffic',
    'book5_1.php' =>'Pedestrian Traffic',
    'book5_1.php' =>'Vehicle Traffic',
    'book5_1.php' =>'Crossroads',
    );

     // array of pages for the book12 submenu
    $submenu_book12 = array(
    'book12_1.php' => '2007/8',
    'book12_2.php' => '2006/7',
    'book12_3.php' => '2005/6',
    'book12_4.php' => '2004/5',
    );

     // array of pages for the identity submenu
    $submenu_identity = array(
    'identity1.php' => 'Identity Header',
    'identity2.php' => 'Identity Header',
    'identity3.php' => 'Identity Header',
    'identity4.php' => 'Identity Header',
    'identity5.php' => 'Identity Header',
    'identity6.php' => 'Identity Header',
    'identity7.php' => 'Identity Header',
    'identity8.php' => 'Identity Header',
    'identity9.php' => 'Identity Header',
    'identity10.php' => 'Identity Header',  
    'identity11.php' => 'Identity Header',  
    'identity12.php' => 'Identity Header',  
    'identity13.php' => 'Identity Header',  
    'identity14.php' => 'Identity Header',  
    'identity15.php' => 'Identity Header',  
    'identity16.php' => 'Identity Header',  
    'identity17.php' => 'Identity Header',  
    'identity18.php' => 'Identity Header',  
    );


     // array of pages for the packaging submenu
    $submenu_packaging = array(
    'packaging1.php' => 'Packaging Header',
    'packaging2.php' => 'Packaging Header',
    'packaging3.php' => 'Packaging Header',
    'packaging4.php' => 'Packaging Header',
    'packaging5.php' => 'Packaging Header',
    'packaging6.php' => 'Packaging Header',
    );

    foreach($left_menu_items as $url => $text) {
    // if the item in the array is the current page, highlight it
    if($script_name == $url) {
    $class = 'class="current"';
    $href = '#nogo';
    }else{
    $class = '';
    $href = $url;
    }
    $l_menu .= '<li '.$class.'><a href="'.$href.'">'. $text . ' </a>';
    if(!empty($submenu[$url])){//$submenu[$url] is an array to store all your submenus of current url
    $l_menu .= '<ul>';
    foreach($submenu[$url] as $suburl => $subtext){
    if($sub_script_name == $suburl) {
    // if the item in the array is the current page, highlight it
    $l_menu .= '<li class="current"><a href="#nogo">'. $text . ' </a></li>';
    } else {
    // else display it as usual link
    $l_menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
    }
    }
    $l_menu .= '</ul>';
    }
    $l_menu .= '</li>';
    }
    ?>   

[broj1]

Here is my suggestion that uses some ideas from above:

Inthe include files for menus only have a structure for each menu (top and left) stored in a multidimensional array. Then create another file that holds the function to draw the menu (and possibly your other functions). Call a function that draw the menu from each included file. The array that holds the menu structure is slightly changed to include submenus. The function is recursive so it traverses the array and draws submenus if they exist.

The top menu script:

<?php

// include functions
include_once('includes/functions.php');

// array to hold top menu
$top_menu_items = array(

    'index.php' => array('text' => 'Home'),
    'about.php' => array('text' => 'About'),
    'news.php' => array('text' => 'News'),
    'contact.php' => array('text' => 'Contact'),
);

// call the function that draws the menu
echo draw_menu($script_name, $top_menu_items);
?>

The left menu script withsome entries having sumbenus (the logos entry has no sumbenu):

<?php

// include functions
include_once('includes/functions.php');

// array to hold left menu and submenu items
$left_menu_items = array(

    'book.php' => array(
        'text'    => 'Book Design',
        'submenu' => array('book1.php' => array('text' => 'Book submenu 1'),
                           'book2.php' => array('text' => 'Book submenu 2'),
                           'book3.php' => array('text' => 'Book submenu 3')
                       )
                   ),

    'identityDesign.php' => array(
        'text'    => 'Identity Design',
        'submenu' => array('identityDesign1.php' =>  array('text' => 'Identity design submenu 1'),
                           'identityDesign2.php' =>  array('text' => 'Identity design submenu 2')
                       )
                   ),

    'logos.php' =>  array(
        'text'    => 'Logos'),

    'packaging.php' =>  array(
        'text'    => 'Packaging',
        'submenu' => array('packaging1.php' =>  array('text' => 'Packaging submenu 1'),
                           'packaging2.php' =>  array('text' => 'Packaging submenu 2'),
                           'packaging3.php' =>  array('text' => 'Packaging submenu 3'),
                           'packaging4.php' =>  array('text' => 'Packaging submenu 4')
                       )
                   ),

    'index.php' => array('text' => 'Selected Projects'),
);

// call the function that draws the menu
echo draw_menu($script_name, $left_menu_items);
?>

The functions script:

<?php
// function to draw menus (top and left with submenus)
function draw_menu($script, $items) {

    // start the html string for menu
    $menu = ' <ul>';

    // loop through the array with menus and submenus
    foreach($items as $url => $val) {

        $text = $val['text'];

        if($script == $url) {

            // if the item in the array is the current page, highlight it
            $menu .= '<li><a style="font-color:#eb0089" href="#nogo">*** '. $text . ' ***</a></li>';

            // if the item contains a submenu element (which is an array)
            if(isset($val['submenu']) and !empty($val['submenu'])) {

                // call the function for that submenu
                $menu .= draw_menu($script, $val['submenu']);
            }

        } else {

            // else display it as usual link
            $menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
        }
    }

    $menu .= '</ul>';

    return $menu;
}
?>

index.php, book.php and other pages have structure like this::

<?php
// the name of the current script
$script_name = end(explode('/',$_SERVER["SCRIPT_NAME"]));

// include the menus (do it within sections as per your design)
include('includes/menu.php');
include('includes/left.php');

// your code here
echo "<p>The script name is $script_name</p>";
?>

The only drawback for this design would be if you have complex menus the arrays san be quite complex too.

[dante123]

But the left menu remains invisible, i can't see it

[broj1]

I can see it. I copied the scripts to www.punkelj.si/DW/index.php. See for yourself (only Book design and index page actually work, the highlighted menu is marked with ***).

[dante123]

So how can i make it work

[broj1]

Can you see it OK on my site? Copy the code exactly, make sure there are no errors. Also check your style definitions. You can post or PM your code that does not work so I can have a look.

[dante123]

Thank you for your help
The only page that is not exactly as you wrote it is the index, because i need to style two menus so i separated them like this:

  <!--this menu appears on the left and it is a vertical menu-->  
<section id="left"> 
        <?php
    // the name of the current script
    $script_name = end(explode('/',$_SERVER["SCRIPT_NAME"]));
    // include the menus (do it within sections as per your design)
    include('includes/left.php');
    // your code here
    //echo "<p>The script name is $script_name</p>";
        ?>
    </section>

    <section id="content">
     <!--this menu appears on the top and it is an horizontal menu-->
     <!--top-->  
        <?php
    // the name of the current script
    $script_name = end(explode('/',$_SERVER["SCRIPT_NAME"]));
    // include the menus (do it within sections as per your design)
        include('includes/menu.php');
    // your code here
    //echo "<p>The script name is $script_name</p>";
        ?>

[broj1]

In the index.php (and other pages like book.php...) the code should be sligtly different from above. The name of the current script should be read only once and on the very top of the script:

<?php
// the name of the current script
$script_name = end(explode('/',$_SERVER["SCRIPT_NAME"]));
?>

<!--this menu appears on the left and it is a vertical menu-->
<section id="left">
<?php
// include the menus
include('includes/left.php');
?>
</section>

<section id="content">
 <!--this menu appears on the top and it is an horizontal menu-->
 <!--top-->
<?php
// include the menus
include('includes/menu.php');
?>

But that really does not affect the functionality. The problem might be in your CSS where you style the sections. So maybe your left section is styled so it is not visible. Can you post the styles for #left and #content (and check whether you use correct IDs for the menu sections - the #content doesn't seem like a menu name). I can see both the menus OK (since I do not use any CSS).

[dante123]

HI this is my style, but everything is visible except the logo span but i closed it

/**************************toptmenu**************************/
#menu{
margin-left:130px;
margin-bottom:12px;
margin-top:20px;
}

ul#list-nav {
list-style:none;
direction:ltr;
font-size:11px;
font-style:italic;
}

ul#list-nav li {
display:inline;
border-right:1px #575354 solid;
padding:0 40px 0 40px;
}

ul#list-nav li a {
text-decoration:none;
font-weight:normal;
color:#000000;
text-align:center;
}

ul#list-nav li a:hover {
color:#eb0089;
}

ul#list-nav li.hebrew{padding-right:0; border-right:0}

/*****************************leftmenu************************************/
#logo{
width:242px;
height:118px;
border-top:1px #8a8889 solid;
border-bottom:2px #000 solid;
background:transparent url("../images/logo.png") no-repeat 0 0;
margin-bottom:30px;
}

span#logospan 
{ 
visibility: hidden;
width:242px;
height:118px;
}

#left{float:left; width:242px; margin-top:28px; height:100%}

#leftMenu{position:absolute; width:242px;}

#imageMenu
{
background:transparent url("../images/imageMenu.gif") no-repeat 0 0;
width:707px;
height:118px;
border-top:1px #8a8889 solid;
border-bottom:2px #000 solid;
margin-bottom:33px;
}

#leftMenu ul
{
font-size:12px;
font-weight:bold;
font-style:italic;
display: none;
}

#leftMenu li
{
list-style-image:url("../images/plus.png");
margin-bottom:14px;
}

div.hr{
height:15px;
background: url("../images/borderB.png") repeat-x bottom;
}

div.hr hr {
  display: none;
}

[broj1]

Hard to say. You have a <section id="content"> but no #content in CSS but I doubt this is a problem. Try if you see the left menu without the CSS (comment out the link to the css style). If you can see the menu (as an ordinary bulletted list) than there is something in your CSS and try to tweak it. If nothing else helps post the whole scripts for menus, index and all CSS files.

[dante123]

Maybe i know what the problem is: the functions.php page calls only one css for both menus: "<ul id="list-nav">", but i have two different menus with two different styles when i take off the left menu styles it works.
The problem is now that i need the left style because the left menu is a vertical menu and the top menu is an horizonthal menu

[dante123]

It works now!! Thanks broj1, i don't know who you are but you are a genious.
Thanks Again

[dante123]

hi
i have another problem concerning this table, how can i open all the submenus not as an accordion but as a separate "ul" that appears always under the "selected projects"?
Thanks

[broj1]

Please explain a bit more. Do you mean to open submenus for all the menu entries by clicking on Selected projects? Is Selected projects page also a homepage?

[dante123]

no, it is like this
when i click over "Book Design" the submenu will open under the "this is a div" line here is the example:

.Book Design (in red)
.Identity Design
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.book 1
.book 2
.book 3
.book 4

if we click on Identity design we will see it like this:

.Book Design
.Identity Design(in red)
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.Identity 1
.Identity 2
.Identity 3
.Identity 4

the book subsubmenus open as an accordion:

.Book Design (in red)
.Identity Design
.Logos
.Packaging
.Selected Projects
--------------this is a div-----------------
.book 1
.book 2
    book 2.1
    book 2.2
    book 2.3
.book 3
.book 4

[dante123]

should i open a new post?

[broj1]

No, I don't think new thread is neccessary. I was away for a couple of days that's why a silence form me :-);

So if I get it right you want the same behaviour as before only that the submenus of a selectem menu appear below the main menus on the left side. I think the php code is something similar to the above snippets only that that the PHP generates divs as well and you then position the divs using CSS.

echo "<div id='submenus'>";

    // the code for submenus

echo "</div>";

I am pretty rusty as far as CSS is concerned so I hope you will manage that part yourself or some more skilled folks will add their posts (or maybe you as in a Web design forum here on DW).

[dante123]

Hi broj1
Thanks for your help!
Like This?

  'identityDesign.php' => array(
  'text' => 'Identity Design',
   'echo "<div id='submenus'>";
  'submenu' => array('identityDesign1.php' => array('text' => 'Identity design submenu 1'),
    'identityDesign2.php' => array('text' => 'Identity design submenu 2'),
    'echo "</div>";
    )
    ),

[dante123]

like this it doesn't work, should it be after the "array"?

[broj1]

The array and function above are not useful for any situation so when you change requirements (like you did) the array and/or the function have to be adapted to suit the requirements.

[dante123]

like this it doesn't work, should it be after the "array"?

[broj1]

Sory I am a bit tigt on time at the moment (trying to meet the deadline). I changed the function to two functions - one that draws the menu and one that draws the submenu below:

// function to draw menu (top and left)
function draw_menu($script, $items, $div_id) {

    // start the list for the menu
    $menu = "<ul>";

    // loop through the array with menus and submenus
    foreach($items as $url => $val) {

        $text = $val['text'];

        if($script == $url) {

            // if the item in the array is the current page, highlight it
            $menu .= '<li><a style="font-color:#eb0089" href="#nogo">*** '. $text . ' ***</a></li>';

        } else {

            // else display it as usual link
            $menu .= '<li><a href="' . $url . '">' . $text . '</a></li>';
        }
    }

    // end the list 
    $menu .= '</ul>';

    return $menu;
}

// function to draw submenu below the main menu on left side
function draw_sub_menu($script, $items) {

    // find the correct submenu items to draw
    foreach($items as $url => $val) {

        // if the current page is on the top level (index.php, book.php...)
        if($script == $url) {

            if(isset($val['submenu']) && !empty($val['submenu'])) {

                $submenu = draw_menu($script, $val['submenu']);

                return $submenu;

            } else {

                return '';
            }
        }

        // if the current page is not on the top level, examine each submenu entry
        if(isset($val['submenu']) && !empty($val['submenu'])) {

            if($script == $val['submenu']['url']) {

                $submenu = draw_menu($script, $val['submenu']);

                return $submenu;
            }
        }
    }

    // if no submenus were drawn return empty string
    return '';
}

To use tese functions the left menu should be changed (the last rows that call the menus):

    echo '<div id="mainmenu">' . draw_menu($script_name, $left_menu_items) . '</div>';
echo '<div id="submenu">' . draw_sub_menu($script_name, $left_menu_items) . '</div>';

Other approaches are possible, too.