{{indexmenu_n>300}}

===== 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 [[english/navigation/nav_list_ul]]. The navigation [[http://www.phpwcms-docu.de/navigation_tags.phtml|NAV_ROW]] meets these requirements perfectly.

  * **Horizontal one row navigation**
  * **Vertical navigation**

{{:deutsch:navigationen:nav_row_vertical_horizontal_1.gif|}}


----
\\
**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**

<code 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']    = '';
</code>

\\

===== CSS: Horizontal 01 =====

{{:deutsch:navigationen:nav_row01_horizontal_img_1.gif|}}

File: **template/inc_css/nav_row_horiz01.css**

<code css|h nav-row-horiz01 |h>
/* ==== 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 ===================================== */
</code>

\\

===== CSS: Horizontal 02 =====

{{:deutsch:navigationen:nav_row02_horizontal_img_1.gif|}}

File: **template/inc_css/nav_row_horiz02.css**

<code css|h nav-row-horiz02 |h>
/* ====== 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 ===================================== */

</code>
\\


===== CSS: Horizontal 03 =====

{{:deutsch:navigationen:nav_row03_horizontal_img_1.gif|}}

File: **template/inc_css/nav_row_horiz03.css**

<code css|h nav-row-horiz03 |h>
/* ====== 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 ===================================== */


</code>

\\

===== CSS: Horizontal 04 =====

{{:deutsch:navigationen:nav_row04_horizontal_img_1.gif|}}

File: **template/inc_css/nav_row_horiz04.css**

<code css|h nav-row-horiz04 |h>
/* ====== 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 ===================================== */
</code>

\\

===== CSS: Vertical 01 =====

{{:deutsch:navigationen:nav_row01_vertical_img_1.gif|}}

File: **template/inc_css/nav_row_vert01.css**

<code css|h nav-row-vert01 |h>
/* ====== 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 ====================================== */

</code>

\\