Download: QuickJump Menu for phpwcms

post everything related to phpwcms templates here
Post Reply
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Download: QuickJump Menu for phpwcms

Post by 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!
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
culda_a
Posts: 521
Joined: Tue 28. Feb 2006, 01:39
Contact:

Re: Download: QuickJump Menu for phpwcms

Post by 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?
ImagePackging design,labels, catalogs,postcards,
User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Re: Download: QuickJump Menu for phpwcms

Post by markus s »

@santcho - cool... :!:
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: Download: QuickJump Menu for phpwcms

Post by 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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Post Reply