| Twiebie |
|
|---|---|
|
I've got a little problem with my CSS menu.
I'd like to have the link that is active highlighted, for example when somebody is on the Forums page, the Forum link is highlighted. My html at the moment: <div class="cssmenu"> <ul id="cssmenu"> <li><a href="index.php">Home</a></li> <li><a href="plug.php?e=contactus">Contact</a></li> <li><a href="page.php?id=4">Roster</a></li> <li><a href="forums.php">Forums</a></li> <li><a href="page.php?id=5">Gameserver</a></li> <li><a href="list.php?c=files">Files</a></li> <li><a href="plug.php?e=search">Search</a></li> <li><a href="page.php?id=39">Chat</a></li> <li><a href="page.php?id=44">Recruitment</a></li> <li><a href="http://www.dev-enter.net/stats/" target="_blank">Stats</a></li> </ul> </div> I was thinking using for example: <li><a href="index.php" id="current">Home</a></li> It does highlight the button, but it will keep it highlighted on different pages aswell, probably because the menu is not in seperate files, but all in the header.tpl. Any ideas how to fix this? |
| GHengeveld |
|
|---|---|
|
I use Javascript to achieve this. Put this in footer.tpl:
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(){
if($(this).attr('href') == '{PHP.out.uri}') { $(this).addClass('active'); }
if($(this).attr('href') == 'index.php' && '{PHP.out.uri}' == '') { $(this).addClass('active'); }
});
});
</script>Use .active in your css for the currently active menu item. You can replace 'index.php' in the second if statement with the link of your default page (index) if you need to. See my website for an example. |
| Twiebie |
|
|---|---|
|
Works like a charm, thank you!
Edit: Got an issue - when viewing for example a topic in the forums, it doesn't keep the Forums button highlighted? |
|
| This post was edited by Twiebie (2010-09-16 04:55, 13 years ago) |
| GHengeveld |
|
|---|---|
|
Correct. You'd have to use indexOf for that:
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(){
if('{PHP.out.uri}'.indexOf($(this).attr('href')) == 0) { $(this).addClass('active'); }
if($(this).attr('href') == 'index.php' && '{PHP.out.uri}' == '') { $(this).addClass('active'); }
});
});
</script>indexOf looks for the first instance and returns its position. Position 0 is at the beginning of the string. |
| Twiebie |
|
|---|---|
|
Works now, cheers!
Edit: Gives another problem with pages. When i'm viewing for example the page: page.php?id=44, the button for page page.php?id=4 is also highlighted.. Any ideas? Thanks. |
|
| This post was edited by Twiebie (2010-09-16 07:56, 13 years ago) |
| urlkiller |
|
|---|---|
|
@Koradhil
do you really need to put that in the footer if it is encapsuled in a document ready function? as i understand it the doc ready function is there for implementing it in the header. URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
|
| GHengeveld |
|
|---|---|
|
General best practice is to put Javascript in the footer, but in this case it won't hurt if you put it in the header instead.
|
| Kort |
|
|---|---|
|
This problem can be solved easily with a small plugin that would deal with top categories for pages and lists highlights. Highlighting everything else is easy with {PHP.z}, {PHP.e} etc.
This is what we used sometime ago for this purpose: highlighter_183.zip (requires Cotlib Library) SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
| ez |
|
|---|---|
|
@Kort,
You mention {PHP.z}, {PHP.e}... (what does this mean ???) Is there a list, somewhere, for usable var's? (I know only a few) I would realy like to know, because it is usefull for skin-design. tnx ==- I say: Keep it EZ -==
|
| Kort |
|
|---|---|
|
PHP.z is location and PHP.e is plugin code, e.g. plug.php?e=statistics
ez, you're forgetting obvious things  SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
| ez |
|
|---|---|
|
The e... I could guess that indeed.
The z I have never used... Question still remains is there a list somewhere of available var's (the usefull ones, NOT all) tnx ==- I say: Keep it EZ -==
|
| Kort |
|
|---|---|
|
PHP.z and PHP.e are most commonly used to identify the location. There are more and it depends on what you treat as useful. As you might guess, there is no such list, so if you're finished with the PFS remodelling, why won't you pick up the tough job of compiling and systemizing the list of variables that might be useful for coders and skinmakers?
ps. as you might know, z can be admin, forums, index, message, page, pfs, polls, pm, plug or users SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
| ez |
|
|---|---|
|
Thnx, and maybe I will......
==- I say: Keep it EZ -==
|
| pieter |
|
|---|---|
|
Kort,
Is there a way to find those variables? Maybe I can help with this. ... can we help you ...
|
| Kort |
|
|---|---|
|
I think it would be better to think of a scheme first so that we would know what to list, and then pick out variables and fill out the scheme. Like in instance "Identifying location" or "User personal data". What do you say?
SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
