Download: QuickJump Menu for phpwcms

[santscho]

Now, you can download a QuickJump Menu for phpwcms. It is a template file for the contentpart "Teaser/Articlelink". You just need to copy a small JS into the header of your template...
Unfortunately, it will show only article names and not structure level names

Demo and Download
http://www.yaml.phpwcms.org/cp-teaser.phtml

Have fun!

[culda_a]

how did you make the template from your site http://www.yaml.phpwcms.org in fact the menu is nice with that icons how did you do that?

[markus s]

@santcho - cool...

[santscho]

uuups. i own an answer here.

Individual graphics for navigation...

First, you need to inlcude the ID in your navigation RT:

Code: Select all

<div class="vertnavi1">{NAV_LIST_UL:F,2,,act_path,active,id}</div>

Every navigation point gets a unique id now:

Code: Select all

<div class="vertnavi1">
<ul id="id_2">

	<li id="li_id_4" class="sub_no sub_first"><a href="index.php?discover">DISCOVER</a></li>
	<li id="li_id_5" class="sub_no sub_ul_true"><a href="index.php?features-media">FEATURES & MEDIA</a></li>
	<li id="li_id_6" class="sub_no"><a href="index.php?action">ACTION</a></li>
	<li id="li_id_7" class="sub_no"><a href="index.php?give">GIVE</a></li>
	<li id="li_id_8" class="sub_no"><a href="index.php?funpage">FUNPAGE</a></li>

</ul>
</div>

Then the CSS:

Code: Select all

vertnavi1 ul li#li_id_4 a {
	height: 27px;
	background: url(images/navi_discover.png) no-repeat 0 0;
	display: block;
	text-indent: -800px;
	margin-bottom: 5px;
}

.vertnavi1 ul li#li_id_4 a:hover {
	background-position: 0 -30px;
	text-indent: -800px;
	margin-bottom: 5px;
}

.vertnavi1 ul li.active#li_id_4 a, .vertnavi1 ul li.act_path#li_id_4 a {
	text-indent: -800px;
	margin-bottom: 5px;
	background-position: 0 -60px;
}

Now, you will face a problem; All the following submenu elements (li li) are classes and have a lower priority as the id css. Means.. if you switch off the image in a following class, it will not work. The browser will ignor the changes in your css classes. Only additional changes will be rendered by the browser. example: the id has no border. in the following class you set a border. A border will be rendered because it was not defined before. For overwriting css settings of an ID, you need to add

Code: Select all

!important

after every setting you want to overwrite ID settings with.

Here example:

Code: Select all

.vertnavi1 ul ul li.sub_no a,
.vertnavi1 ul ul li.sub_no a:link,
.vertnavi1 ul ul li.sub_no a:visited,
.vertnavi1 ul ul li.sub_no a:active,
.vertnavi1 ul ul li.sub_ul a,
.vertnavi1 ul ul li.sub_ul a:link,
.vertnavi1 ul ul li.sub_ul a:visited,
.vertnavi1 ul ul li.sub_ul a:active {
	font-weight: normal;
	font-style: normal;
	padding: 3px 0 !important;
	background-image: none !important;
	background-color: #c3c3c3 !important;
	color: black;
	border-bottom: 1px solid white;
	height: auto !important;
	text-indent: 20px !important;
	margin: 0 !important;

Santscho