NAV_ROW (CSS) [phpwcms-HowTo:wiki]

You are here: Willkommen im phpwcms-HowTo:wiki » Documentation (EN) » Navigation » NAV_ROW (CSS)

Show pagesource Old revisions

Recent changes Index

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

NAV_ROW (CSS)

{NAV_ROW[CURRENT|INT:0|1]}

At this point I show you a little CSS example of the navigation tag {NAV_ROW}.
For simple one-dimensional navigation systems without sub-levels, it is not necessary to resort to NAV_LIST_UL (CSS). The navigation NAV_ROW meets these requirements perfectly.

Horizontal one row navigation
Vertical navigation

Docu: http://www.phpwcms-docu.de/navigation_tags.phtml
Forum: –

Author: K.Heermann (flip-flop) http://planmatrix.de
CMS-Version: >= V1.2.x
Version: 1.0 26.04.2010

Tag: {NAV_ROW} | {NAV_ROW:CURRENT:0 oder 1} | {NAV_ROW:INT:0 oder 1}

Filename: –

Folder: – (System)

Condition: –

conf.template_default.inc.php

Settings in file: config/phpwcms/conf.template_default.inc.php

// row based navigation
$template_default['nav_row']['before']                      = '';
$template_default['nav_row']['after']                       = '';
$template_default['nav_row']['between']                     = '<div class="space"><!--space//--></div>';
$template_default['nav_row']['link_before']                 = '<div class="normal">';
$template_default['nav_row']['link_after']                  = '</div>';
$template_default['nav_row']['link_before_active']          = '<div class="aktiv">';
$template_default['nav_row']['link_after_active']           = '</div>';
$template_default['nav_row']['link_direct_before']          = '';
$template_default['nav_row']['link_direct_after']           = '';
$template_default['nav_row']['link_direct_before_active']   = '';
$template_default['nav_row']['link_direct_after_active']    = '';

CSS: Horizontal 01

File: template/inc_css/nav_row_horiz01.css

nav-row-horiz01

/* ==== nav-row horizontal ======================================= */
/* http://forum.phpwcms.org/posting.php?mode=reply&f=28&t=20094  */
/* ====== nav-row-horiz01 ======================================== */
 
/* Wrapper around all // Umschlieszer gesamt */
.nav-row-horiz01 {
    background: #fff;
    border: 1px solid #888;
    height: 28px;
    width: 540px;
    padding: 5px 6px 0 6px;
}
 
/* Spacer // Zwischenraum */
.nav-row-horiz01 .space {
    float: left;
    width: 1px;
    height:10px;
}
 
/* Formatting a-tag  // Formatierung des a-tags */
.nav-row-horiz01 a,
.nav-row-horiz01 a:visited {
    float: left;
    border: 1px solid #888;
    text-decoration:none;
    font-size:14px;
    color: #fff;
/*    font-weight:bold; */
    padding: 2px 6px 2px 6px;
}
 
/* Formatting normal status a-tag  // Formatierung normaler Status a-tags */
.nav-row-horiz01 .normal a,
.nav-row-horiz01 .normal a:visited {
    background: #808080;
    text-decoration: none;
}
 
/* Formatting active status a-tag  // Formatierung aktiver Status a-tags */
.nav-row-horiz01 .aktiv a,
.nav-row-horiz01 .aktiv a:visited {
    background: #FF6F00;
    position: relative;  /* IE6  */
}
 
/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-horiz01 .normal a:hover,
.nav-row-horiz01 .aktiv a:hover {
    background: #C7A317;
    color: #fff;         /* IE6  */
    position: relative;  /* IE6  */
}
/* ==== End  nav-row-horiz01 ===================================== */

CSS: Horizontal 02

File: template/inc_css/nav_row_horiz02.css

nav-row-horiz02

/* ====== nav-row-horiz02 ======================================== */
 
/* Wrapper around all // Umschlieszer gesamt */
.nav-row-horiz02 {
    background: #FFFFFF;
    border: 1px solid #888;
    height: 95px;
    width: 540px;
    padding: 6px 6px 0 6px;
}
 
/* Spacer // Zwischenraum */
.nav-row-horiz02 .space {
    float: left;
    width: 1px;
    height:10px;
}
 
/* Formatting a-tag  // Formatierung des a-tags */
.nav-row-horiz02 a,
.nav-row-horiz02 a:visited {
    float: left;
    border: 1px solid #888;
    text-decoration:none;
    font-size:14px;
    color: #fff;
/*    font-weight:bold; */
    padding: 2px 6px 3px 6px;   /* dist01-top =  2 */
    margin-top: 65px;           /* dist02-top = 65 */
}
 
/* Formatting normal status a-tag  // Formatierung normaler Status a-tags */
.nav-row-horiz02 .normal a,
.nav-row-horiz02 .normal a:visited {
    background: #808080;
    text-decoration:none;
}
 
/* Formatting active status a-tag  // Formatierung aktiver Status a-tags */
.nav-row-horiz02 .aktiv a,
.nav-row-horiz02 .aktiv a:visited {
    background: #FF6F00;
    padding-top: 67px;          /* dist01-top + dist02-top: 2 + 65 = 67 */
    margin: 0;
    position: relative;  /* IE6  */
}
 
/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-horiz02 .normal a:hover,
.nav-row-horiz02 .aktiv a:hover {
    background: #C7A317;
    padding-top: 67px;          /* dist01-top + dist02-top: 2 + 65 = 67 */
    margin: 0;
    color: #fff;         /* IE6  */
    position: relative;  /* IE6  */
}
 
/* ==== End  nav-row-horiz02 ===================================== */

CSS: Horizontal 03

File: template/inc_css/nav_row_horiz03.css

nav-row-horiz03

/* ====== nav-row-horiz03 ======================================== */
 
/* Wrapper around all // Umschlieszer gesamt */
.nav-row-horiz03 {
    background: #FFFFFF;
    border: 1px solid #888;
    height: 95px;
    width: 540px;
    padding: 6px 6px 0 6px;
}
 
/* Spacer // Zwischenraum */
.nav-row-horiz03 .space {
    float: left;
    width: 1px;
    height:10px;
}
 
/* Formatting a-tag  // Formatierung des a-tags */
.nav-row-horiz03 a,
.nav-row-horiz03 a:visited {
    float: left;
    border: 1px solid #888;
    text-decoration:none;
    font-size:14px;
    color: #fff;
/*    font-weight:bold; */
    padding: 67px 6px 3px 6px;
}
 
/* Formatting normal status a-tag  // Formatierung normaler Status a-tags */
.nav-row-horiz03 .normal a,
.nav-row-horiz03 .normal a:visited {
    background: #808080;
    text-decoration:none;
}
 
/* Formatting active status a-tag  // Formatierung aktiver Status a-tags */
.nav-row-horiz03 .aktiv a,
.nav-row-horiz03 .aktiv a:visited {
    background: #FF6F00;
    position: relative;  /* IE6  */
}
 
/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-horiz03 .normal a:hover,
.nav-row-horiz03 .aktiv a:hover {
    background: #C7A317;
    color: #fff;         /* IE6  */
    position: relative;  /* IE6  */
}
 
/* ==== End  nav-row-horiz03 ===================================== */

CSS: Horizontal 04

File: template/inc_css/nav_row_horiz04.css

nav-row-horiz04

/* ====== nav-row-horiz04 ======================================== */
 
/* Wrapper around all // Umschlieszer gesamt */
.nav-row-horiz-wrap {
    background: #FFFFFF;
    border: 1px solid #888;
    height: 30px;
    width: 540px;
    margin: 0 0 0 320px;
    padding: 6px 6px 0 6px;
}
 
.nav-row-horiz04 {
    padding:0;
    margin:0;
}
* html .nav-row-horiz04 {   /* only IE6 */
    position: absolute;
}
 
/* Spacer // Zwischenraum */
.nav-row-horiz04 .space {
    float: left;
    width: 1px;
    height:10px;
}
 
/* Formatting a-tag  // Formatierung des a-tags */
.nav-row-horiz04 a,
.nav-row-horiz04 a:visited {
    float: left;
    border: 1px solid #888;
    text-decoration:none;
    font-size:14px;
    color: #fff;
/*    font-weight:bold; */
    padding: 2px 6px 3px 6px;
}
 
/* Formatting normal status a-tag  // Formatierung normaler Status a-tags */
.nav-row-horiz04 .normal a,
.nav-row-horiz04 .normal a:visited {
    background: #808080;
    text-decoration:none;
}
 
/* Formatting active status a-tag  // Formatierung aktiver Status a-tags */
.nav-row-horiz04 .aktiv a,
.nav-row-horiz04 .aktiv a:visited {
    background: #FF6F00;
    padding-bottom: 27px;
    position: relative;  /* IE6  */
}
 
/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-horiz04 .normal a:hover,
.nav-row-horiz04 .aktiv a:hover {
    background: #C7A317;
    padding-bottom: 27px;
    color: #fff;         /* IE6  */
    position: relative;  /* IE6  */
}
 
/* ==== End  nav-row-horiz04 ===================================== */

CSS: Vertical 01

File: template/inc_css/nav_row_vert01.css

nav-row-vert01

/* ====== nav-row-vert01 ========================================= */
 
/* Wrapper around all // Umschlieszer gesamt */
.nav-row-vert01 {
    background: #fff;
    border: 1px solid #888;
    width: 195px;
    padding: 5px 6px 5px 6px;
}
 
/* Spacer // Zwischenraum */
.nav-row-vert01 .space {
    width: 10px;
    height:1px;
}
 
/* Formatting a-tag  // Formatierung des a-tags */
.nav-row-vert01 a,
.nav-row-vert01 a:visited {
    display: block;
    border: 1px solid #888;
    text-decoration:none;
    height: 21px;
    font-size:14px;
    color: #fff;
/*    font-weight:bold; */
    padding: 4px 6px 0 6px;
}
 
/* Formatting normal status a-tag  // Formatierung normaler Status a-tags */
.nav-row-vert01 .normal a,
.nav-row-vert01 .normal a:visited {
    background: #808080;
    text-decoration: none;
}
 
/* Formatting active status a-tag  // Formatierung aktiver Status a-tags */
.nav-row-vert01 .aktiv a,
.nav-row-vert01 .aktiv a:visited {
    background: #FF6F00;
 
}
 
/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-vert01 .normal a:hover,
.nav-row-vert01 .aktiv a:hover {
    background: #C7A317;
    color: #fff;         /* IE6  */
}
/* ==== End  nav-row-vert01 ====================================== */

english/navigation/nav-row.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions