Vertical navigation in footer

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Vertical navigation in footer

Post by 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


Image
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Vertical navigation in footer

Post by 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:
Image
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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Vertical navigation in footer

Post by update »

flip-flop wrote:[Off-Topic]
Diese Darstellung der NAVI existierte schon bevor die alte kcomp Seite eine ähnliche Darstellung zeigte!!
[/Off-Topic]
:lol: :lol: :lol:
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" .....
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Re: Vertical navigation in footer

Post by ssddgreg »

Dear Knut,

thanks for this hint and help!

Looks awesome, hardly waiting to test it out.

Thanks a lot!
Dejan
breitsch
Posts: 473
Joined: Sun 6. Mar 2005, 23:12
Location: bern switzerland

Re: Vertical navigation in footer

Post by 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:
Image
http://www.youtube.com/watch?v=jqxENMKaeCU
because it's important!
breitsch
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Re: Vertical navigation in footer

Post by 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.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Vertical navigation in footer

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Re: Vertical navigation in footer

Post by 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 
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Vertical navigation in footer

Post by flip-flop »

My solutions are exactly what you need.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Re: Vertical navigation in footer

Post by ssddgreg »

This is what I get
Image

This is what I have as a site structure

Image

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
Image

Dejan
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Vertical navigation in footer

Post by 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 */ }
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
ssddgreg
Posts: 31
Joined: Mon 23. May 2005, 22:05
Location: Slovenia
Contact:

Re: Vertical navigation in footer

Post by 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
Image
Post Reply