phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

Vertical navigation in footer

https://forum.phpwcms.org/viewtopic.php?t=19972

Page 1 of 1

Vertical navigation in footer

Posted: Sun 21. Mar 2010, 08:24
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

Re: Vertical navigation in footer

Posted: Sun 21. Mar 2010, 08:51
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

Re: Vertical navigation in footer

Posted: Sun 21. Mar 2010, 13:30
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" .....

Re: Vertical navigation in footer

Posted: Sun 21. Mar 2010, 21:01
by ssddgreg
Dear Knut,

thanks for this hint and help!

Looks awesome, hardly waiting to test it out.

Thanks a lot!
Dejan

Re: Vertical navigation in footer

Posted: Sun 21. Mar 2010, 21:58
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

Re: Vertical navigation in footer

Posted: Mon 22. Mar 2010, 20:14
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.

Re: Vertical navigation in footer

Posted: Tue 23. Mar 2010, 09:32
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

Re: Vertical navigation in footer

Posted: Tue 23. Mar 2010, 17:47
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

Re: Vertical navigation in footer

Posted: Tue 23. Mar 2010, 18:02
by flip-flop
My solutions are exactly what you need.

Knut

Re: Vertical navigation in footer

Posted: Tue 23. Mar 2010, 18:35
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

Re: Vertical navigation in footer

Posted: Tue 23. Mar 2010, 19:03
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 */ }

Re: Vertical navigation in footer

Posted: Wed 24. Mar 2010, 07:31
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
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited