How to make wireframe menu multilevel ??

**iv4o** · 12-24-2009, 05:45 PM

Hello,
is it possible to make from my wireframe menu an sublevel menu, and how ?
This is the .css and .php of my menu :

wireframemenu.css

Code:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

h1.background{
background: url('/themes/water_drop/images/menu_header.png');
background-repeat:repeat-x;
border: 1px solid #C0C0C0;
color: #FFFFFF;
}

h1{
font: bold 15px Verdana;
padding: 4px;
margin: 1px;
text-transform: uppercase;
text-align: center;
}

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
text-align: left; /*IE/Opera only rule.*/
width: 160px;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font-family: "Trebuchet MS", bold 13px Verdana, Geneva, Arial, sans-serif;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #ECEEEC;
color: navy;
}

and theme.php part :

PHP Code:


<div class="wireframemenu">



<h1 class="background">{$lang_water_drop['gal_menu']}</h1>   



<!-- BEGIN home -->

                       <p align="left"><a href="{HOME_TGT}" title="{HOME_TITLE}"><img src="themes/water_drop/images/onebit_01.png"width="16" height="16" border="0" alt="" /> {HOME_LNK}</a></p>

<!-- END home -->



<!-- BEGIN my_gallery -->

                       <p align="left"><a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"><img src="themes/water_drop/images/onebit_13.png"width="16" height="16" border="0" alt="" /> {MY_GAL_LNK}</a></p>

<!-- END my_gallery -->



<!-- BEGIN allow_memberlist -->

                        <p align="left"><a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"><img src="themes/water_drop/images/onebit_17.png"width="16" height="16" border="0" alt="" /> {MEMBERLIST_LNK}</a></p>

<!-- END allow_memberlist -->



<!-- BEGIN my_profile -->

                        <p align="left"><a href="{MY_PROF_TGT}">» {MY_PROF_LNK}</a></p>

<!-- END my_profile -->



<!-- BEGIN faq -->

                        <p align="left"><a href="{FAQ_TGT}" title="{FAQ_TITLE}"><img src="themes/water_drop/images/onebit_37.png"width="16" height="16" border="0" alt="" /> {FAQ_LNK}</a></p>

<!-- END faq -->



<!-- BEGIN enter_admin_mode -->

                        <p align="left"><a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}">» {ADM_MODE_LNK}</a></p>

<!-- END enter_admin_mode -->



<!-- BEGIN leave_admin_mode -->

                       <p align="left"><a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}">» {USR_MODE_LNK}</a></p>

<!-- END leave_admin_mode -->



<!-- BEGIN upload_pic -->

                     <p align="left"><a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"><img src="themes/water_drop/images/onebit_11.png"width="16" height="16" border="0" alt="" /> {UPL_PIC_LNK}</a></p>

<!-- END upload_pic -->



<!-- BEGIN register -->

                       <p align="left"><a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"><img src="themes/water_drop/images/onebit_04.png"width="16" height="16" border="0" alt="" /> {REGISTER_LNK}</a></p>

<!-- END register -->



<!-- BEGIN login -->

                        <p align="left"><a href="{LOGIN_TGT}" title=""><img src="themes/water_drop/images/onebit_22.png"width="16" height="16" border="0" alt="" /> {LOGIN_LNK}</a></p>

<!-- END login -->



<!-- BEGIN logout -->

                        <p align="left"><a href="{LOGOUT_TGT}" title=""><img src="themes/water_drop/images/onebit_21.png"width="16" height="16" border="0" alt="" /> {LOGOUT_LNK}</a></p>

<!-- END logout -->

</div>

EOT;

  

// HTML template for sub_menu

$template_sub_menu = <<<EOT



<div class="wireframemenu">

<!-- BEGIN custom_link -->

     <p align="left"><a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}">» {CUSTOM_LNK_LNK}</a></p>

<!-- END custom_link -->



<p align="left"><a href="location_map.php"><img src="themes/water_drop/images/001_40.png"width="16" height="16" border="0" alt="" /> {$lang_water_drop['location_map']}</a></p>



<!-- BEGIN album_list -->

    <p><a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"><img src="themes/water_drop/images/folder_open2.png"width="16" height="16" border="0" alt="" /> {ALB_LIST_LNK}</a></p>

<!-- END album_list -->

<p align="left"><a href="{LASTUP_TGT}"><img src="themes/water_drop/images/action_add.png"width="16" height="16" border="0" alt="" /> {LASTUP_LNK}</a></p>

<p align="left"><a href="{LASTCOM_TGT}"><img src="themes/water_drop/images/001_50.png"width="16" height="16" border="0" alt="" /> {LASTCOM_LNK}</a></p>

<p align="left"><a href="{TOPN_TGT}"><img src="themes/water_drop/images/onebit_39.png"width="16" height="16" border="0" alt="" /> {TOPN_LNK}</a></p>

<p align="left"><a href="{TOPRATED_TGT}"><img src="themes/water_drop/images/001_15.png"width="16" height="16" border="0" alt="" /> {TOPRATED_LNK}</a></p>

<p align="left"><a href="{FAV_TGT}"><img src="themes/water_drop/images/onebit_43.png"width="16" height="16" border="0" alt="" /> {FAV_LNK}</a></p>

<p align="left"><a href="{SEARCH_TGT}"><img src="themes/water_drop/images/onebit_02.png"width="16" height="16" border="0" alt="" /> {SEARCH_LNK}</a></p>

</div>

<hr />

<div class="wireframemenu">

<h1 class="background">{$lang_water_drop['friends']}</h1>

<p align="left"><a href="http://www.avatar-bg.org">www.avatar-bg.org</a></p>

<p align="left"><a href="http://www.party-bg.net/">www.party-bg.net</a></p>

<p align="left"><a href="http://www.w3schools.com/"><img src="http://www.w3schools.com/images/w3schools88x31.gif" border="0"alt="" /></a></p>

<p align="left"><a href="http://www.htmldog.com/"><img src="http://www.htmldog.com/badge3.gif" width="88" height="31" border="0" alt="HTML and CSS tutorials, references, and articles" /></a></p>

</div>

My wish is to make something like that if its possible: http://www.dynamicdrive.com/style/cs...side_bar_menu/ and to move my friends block in this submenu.

Here is link to my gallery:

www.abroadbg.com

Thanks in advance and Merry Christmas all

**iv4o** · 01-06-2010, 04:31 PM

BUMP

Do i need to explane better what i want ore is impossible that ?

**jscheuer1** · 01-06-2010, 06:05 PM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to the demo page on DD of the wireframe menu. I couldn't find it.

However, if you want a multilevel menu, it's better to start out with one and make it look like another menu via style, than it is to start with one that isn't multilevel because you like how it looks and/or how easy it is to setup and try to make it multilevel.

**iv4o** · 01-07-2010, 12:07 PM

Sorry jscheuer1, i forget to add the link to the wireframe menu:
I cant edit my first post so i add the link and the Script name here if somebody want to put the info in my first post and delete this one Please

Thank you

Script: Wire Frame Menu
http://www.dynamicdrive.com/style/cs...re-frame-menu/

**jscheuer1** · 01-07-2010, 03:23 PM

Both the script and styles have changed. The markup is that of the Nested Side Bar Menu. Copy the below to a text only editor like NotePad and save as wire_bar.htm or whatever. Use it as a template. You will also need the image:

or use your own. The code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #fff; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: black;
}

.sidebarmenu ul li a:hover{
background-color: #f8fbbd;
color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
width: 170px; /*Sub Menu Items width */
top: -1px;
}

.bottom {
border-bottom-width: 0!important;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

document.write('<style type="text/css">.sidebarmenu ul li ul{ position: absolute;visibility: hidden;}<\/style>');

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
  function getLi(node){
    while((node = node.nextSibling)){
      if(node.nodeType === 1){
        return true;
      }
    }
    return false;
  }
for (var i=0; i<menuids.length; i++){
  var atags = document.getElementById(menuids[i]).getElementsByTagName("a");
  for (var j = atags.length - 1; j > -1; --j)
    if(!getLi(atags[j].parentNode))
      atags[j].className += ' bottom';
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle";
    ultags[t].parentNode.getElementsByTagName("a")[ultags[t].parentNode.getElementsByTagName("a").length - 1].className+=" bottom";
  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", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
</head>
<body>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<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="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>

**iv4o** · 01-08-2010, 12:30 AM

Thank you,

This make the menu as i like, but appear i receive a lots of errors from this part of the code :

Code:

document.write('<style type="text/css">.wireframemenu ul li ul{ position: absolute;visibility: hidden;}<\/style>');

What i did is to split the .css part in separate file and i add to the .html the other part, but the Markup Validator return a lots of errors in the code above

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/water_drop/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<script language="javascript" type="text/javascript">
this.focus();
if (window.location.search.indexOf('pos=') != -1) {
window.location.href = '#nav_pic';
} </script>
<script type="text/javascript" src="dddropdownpanel.js">
/***********************************************
* DD Drop Down Panel- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

document.write('<style type="text/css">.wireframemenu ul li ul{ position: absolute;visibility: hidden;}<\/style>');

var menuids=["wireframemenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
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", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
<link rel="stylesheet" type="text/css" href="dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="themes/water_drop/toggle.css" />
<link rel="stylesheet" type="text/css" href="themes/water_drop/halfmoon.css"  />
<link rel="stylesheet" type="text/css" href="themes/water_drop/wireframemenu.css"  />

<!--
  SVN version info:
  Coppermine version: 1.4.24
  $Revision: 5969 $
  $LastChangedBy: gaugau $
  $Date: 2009-05-21 22:03:33 +0200 (Do, 21 Mai 2009) $
-->

</head>

<body>

<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<div class="togglebar">
<br />
<img src="/albums/userpics/10001/4/thumb_dscn2572.jpg" width="100" height="75" alt="" class="closepanel" style="float:left; width:100px; border:0; height:75px; margin:0 10px 10px 0" />
Здравейте в AbroadBG.com.&nbsp;&nbsp;Надявам се идеята за галерията да ви харесва,&nbsp;&nbsp;аз се казвам Иво и често пътувам в различни страни и градове,
&nbsp;мойто хоби е да правя снимки от всички краища <br /> на света. Опитвам се да пътувам всеки месец на ново място ако имам възможност.&nbsp;&nbsp;
Имаме си книга за гости в която ако искате може да оставите вашите коментари&nbsp;&nbsp;-&nbsp;&nbsp;<a href="guestbook.php" style="color:blue">Книга за гости.</a>
<br />
Коментирайте и оценявайте.
</div>
</div>
<div id="mypaneltab" class="ddpaneltab" />
<a href="#"><span>За Мен</span> </a>
</div>
{CUSTOM_HEADER}
  <table width="100%" border="0" cellpadding="20" cellspacing="20" >
    <tr>
      <td valign="top" style="border: 2px solid #CCD7E0; background-color: #FFFFFF;">
	  {LOGIN_FORM}
	   <table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
    <td valign="top" align="left" id="content_frame">			
	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
            <a href="index.php"><img src="themes/water_drop/images/logo.png" border="0" alt="" /></a> 
<br /><br />
			{ADMIN_MENU} 
</td> 
</tr> 
 </table>
          <table width="100%">
            <tr> 
             <td width="150" valign="top" align="center" bgcolor="white"> 
                <table width="150" border="0" bgcolor="white">                         
                  <tr> 
                    <td width="150">{SYS_MENU} <hr /> {SUB_MENU} 
                    </td>
                    </tr>
                </table>
				</td>
              <td>{GALLERY} 
</td>
</tr>
</table>
       <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
	<tr>
<td align="center" valign="top">		  
{LANGUAGE_SELECT_FLAGS}
			  {THEME_SELECT_LIST}{LANGUAGE_SELECT_LIST}	 
			  </td>
	  </tr>
       </table>
	   </td>
</tr>
       </table> 
	   </td>
  </tr>
</table>
{CUSTOM_FOOTER}{VANITY}
</body>
</html>

U can see what i mean here http://validator.w3.org/check?uri=ht...idator%2F1.654

**jscheuer1** · 01-08-2010, 12:40 AM

Best thing with XHTML, which you really shouldn't be using anyway* unless it's unavoidable, is to make the script external. That way the validator will not consider anything within the script as actual page markup, which after all, it isn't.

*See:

http://www.webdevout.net/articles/beware-of-xhtml

Thread: How to make wireframe menu multilevel ??

Thread Tools

Search Thread

How to make wireframe menu multilevel ??

Bookmarks

Bookmarks

Posting Permissions