Vertical navigation in footer

[ssddgreg]

Hi,

I am new to phpwcms, but have used it before ... I would need support for vertical manues in the footer area as shown in the attached image.

Can someone help me with a sample or an url of a tutorial? I have searched in the forum for vertical menue, but didn't find it under sthat keyword.

Thanks!
Dejan

[flip-flop]

Hi,

please define your inner logic behind this menu.

Are all vertical links in each case under a category?

A very simple way is to use the NAV_LIST_UL four times:

Small example Verticle Navi side-by-side:

ID= different start category for every vertical link section.

[Off-Topic]
Diese Darstellung der NAVI existierte schon bevor die alte kcomp Seite eine ähnliche Darstellung zeigte!!
[/Off-Topic]



Knut

[update]

[Off-Topic]
Diese Darstellung der NAVI existierte schon bevor die alte kcomp Seite eine ähnliche Darstellung zeigte!!
[/Off-Topic]

Lightyears before I worked on a lawyers site with mirrored items at the bottom with a colored horizon. Another one got a pull up menu additionally in the footer (*). Good ideas are arising everywhere and there is no doubt that the hen has been there before the egg - or has it been the other way round?

* No need to tell which nice things have been done before, there always is a "before" .....

[ssddgreg]

Dear Knut,

thanks for this hint and help!

Looks awesome, hardly waiting to test it out.

Thanks a lot!
Dejan

[breitsch]

Might not be the best solution but it works for me on some sites:

to use the real sitemap of phpwcms, so you can define which structure/article are in the sitemap
only obstacle is that the height of the sub-lists is not dynamic, maybe our css freaks can fix this.
tested only in FF and IE7


add a sitemap content part in some hidden level within your site.
add a div container to the footer section in your template with a SHOW_CONTENT replacement tag which refers to the sitemap cp
add the css file to your template

in your template (footer):

Code: Select all

<div class="sitemap_footer">{SHOW_CONTENT:CP,2}</div>

css, 3 levles (thanks flip flop!!):

Code: Select all

/* CSS Document */
/* ======================================================================
   >= V1.30   CSS for an vertical menu
   <div class="sitemap_footer">{SHOW_CONTENT:CP,[ID of Sitemap-Content Part]}</div>
   Level 0 - 3;
   21.03.2010 breitsch
   based on NAV_LIST_UL 26.03.07 flip-flop (KH)
========================================================================= */

/*the div container*/
.sitemap_footer {
   margin: 0;
   padding: 0;
   border: 0;
   float:left;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: normal;
   width: 640px;  /* ++ width of sitemapcontainer*/
   border-top: 1px solid #343434; /* IE6 Bug */
  /* background:#123123; /*background*/
}

/*the 'HOME' list*/
.sitemap_footer ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}
/*the HOME link*/
.sitemap_footer ul li { 
    width: 640px; /* Width of Sitemap */
    display: block;
}
.sitemap_footer ul li a,
.sitemap_footer ul li a:link,
.sitemap_footer ul li a:visited,
.sitemap_footer ul li a:active {
    color: #343434;
}
.sitemap_footer ul li a:hover {
    text-decoration: none;
    color: #343434;
}

/* ==== Styles for Menu Items =================================== */

/* ==== LEVEL X ================================================= */

.sitemap_footer ul ul { 
    float:left;
 }

.sitemap_footer ul ul li { 
    width: 150px;  /* Width of Sub-Lists */
    display: inline;
    float:left;
    padding-right:5px;
    height:120px; /* Height of Sub-Lists - this should be dynamic (???)*/
}

/* ====  simple link <a> // einfacher Link <a> ==== */
.sitemap_footer ul ul li a,
.sitemap_footer ul ul li a:link,
.sitemap_footer ul ul li a:visited,
.sitemap_footer ul ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #999999;           /* ++ Text color // Textfarbe */
   font-weight: bold;
   /* ++ Text adjust e.g. upper gap and left gap 25px */
   padding: 1px 0 0 0;
   line-height: 15px;
   /* ++ bottom line if you want */   
   border-bottom: 1px solid #1f1f1f;
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 145px;  /* IE5x Opera <= 5 */
   widt\h: 145px;  /* = (Width of Menu Items) - (padding-right + padding-left)- (padding-right of li + padding-left og li) */
}

/* ====  hover link <a> ==== */
.sitemap_footer ul ul li a:hover {
    color: #FFFFFF;
}


/* ==== LEVEL X+1 =============================================== */
.sitemap_footer ul ul ul {
   display: block;
   float:left;
   list-style-type: none;
   width: 145px;  /* Width of Menu Items */
}

.sitemap_footer ul ul ul li {
    height:auto;
    display: block;
    width: 145px;
    /*float:left;*/
    padding:0px;
}

.sitemap_footer ul ul ul li a,
.sitemap_footer ul ul ul li a:link,
.sitemap_footer ul ul ul li a:visited,
.sitemap_footer ul ul ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #999999;
   line-height: 15px;
   padding: 1px 0 0 0px;
   border-bottom: 1px solid #1f1f1f;
   \width: 145px;  /* IE5x Opera <= 5 */
   widt\h: 145px;
}

.sitemap_footer ul ul ul li a:hover {
    color: #FFFFFF;
}


/* ==== LEVEL X+2 =============================================== */
.sitemap_footer ul ul ul ul {
   display: block;
   float:left;
   list-style-type: none;
   width: 145px;  /* Width of Menu Items */
}

.sitemap_footer ul ul ul ul li {
    height:auto;
    display: block;
    width: 145px;
    /*float:left;*/
    padding:0px;
}
.sitemap_footer ul ul ul ul li a,
.sitemap_footer ul ul ul ul li a:link,
.sitemap_footer ul ul ul ul li a:visited,
.sitemap_footer ul ul ul ul li a:active  {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #999999;
   line-height: 15px;
   padding: 1px 0 0 10px;
   border-bottom: 1px solid #1f1f1f;
   \width: 135px;  /* IE5x Opera <= 5 */
   widt\h: 135px;
}

.sitemap_footer ul ul ul ul li a:hover {
    color: #FFFFFF;
}

/*==== END LEVEL X ============================================= */

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

/* ==== End  sitemap_footer ========================================= */ 

results in something like this:

[ssddgreg]

Thanks for your helpful input!

I am however finding difficulties to get the vertical divider working - my navigation is not split into categories, just in a single column.

[flip-flop]

There are one category with many sub-categories. The subcategories are to be divided?

Do I understand that correctly?

Given e.g:

Code: Select all

-- Cat00
----- Cat01
----- Cat02
----- Cat03
----- Cat04
----- .....
----- .....
----- Cat12
----- Cat13

You want e.g.

Code: Select all

 Cat01  |  Cat04  | .....  | Cat12
 Cat02  |  .....  | .....  | Cat13
 Cat03  |  .....  | .....  |

Without a special frontend_render snippet I can´t see a chance to do so.

At "A List Apart" I found this: Wrapping a single list with XHTML

Knut

[ssddgreg]

Hello,

I am getting something like this

Code: Select all

PARENT_CATEGORY1
  SUB_CAT1
  SUB_CAT2
  SUB_CAT3
  SUB_CAT4
  SUB_CAT5
  SUB_CAT6
PARENT_CATEGORY2
  SUB_CAT7
  SUB_CAT8
  SUB_CAT9
  SUB_CAT10
  SUB_CAT11
  SUB_CAT12
...

but I would need something like this

Code: Select all

PARENT_CATEGORY1         |  PARENT_CATEGORY2
  SUB_CAT1               |      SUB_CAT7             
  SUB_CAT2               |      SUB_CAT8            
  SUB_CAT3               |      SUB_CAT9             
  SUB_CAT4               |      SUB_CAT10             
  SUB_CAT5               |      SUB_CAT11             
  SUB_CAT6               |      SUB_CAT1 

[flip-flop]

My solutions are exactly what you need.

Knut

[ssddgreg]

This is what I get


This is what I have as a site structure



This is what I have under template (footer.css):
http://www.scgis-si.org/template/inc_css/footer.css

and in the footer section

Code: Select all

<ul><div class="navi_head navi_145">{NAV_LIST_UL:FP,1,1,act_path,active}</div></ul>
<ul><div class="navi_head navi_145">{NAV_LIST_UL:FP,2,1,act_path,active}</div></ul>
<ul><div class="navi_head navi_130">{NAV_LIST_UL:FP,3,1,act_path,active}</div></ul><ul>
<div class="navi_head navi_145">{NAV_LIST_UL:FP,14,1,act_path,active}</div></ul><ul>
<div class="navi_head navi_145">{NAV_LIST_UL:FP,17,1,act_path,active}</div></ul><ul>
<div class="navi_head navi_130">{NAV_LIST_UL:FP,21,1,act_path,active}</div></ul>

This is how my page layout looks like


Dejan

[flip-flop]

Please Insert into every

Code: Select all

.navi_120, navi_120 ul {     width: 120px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_145, navi_145 ul {     width: 145px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_130, navi_130 ul {     width: 130px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_100, navi_100 ul {     width: 100px; /* ++ Width of Menu Items // Breite der Navigation */ }

a float: left;

Code: Select all

.navi_120, navi_120 ul {     float: left; width: 120px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_145, navi_145 ul {     float: left; width: 145px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_130, navi_130 ul {     float: left; width: 130px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_100, navi_100 ul {     float: left; width: 100px; /* ++ Width of Menu Items // Breite der Navigation */ }

[ssddgreg]

Thanks! It worked, great!

I am getting just my last one shifted a little bit (probably because of the upper layout).

Wonderful support!

Best wishes,
Dejan