Menu Navigation On Page

peptobismal	#1 2012-02-24 20:51
Members	Okay, so I have looked fairly through the documentation provided a couple of weeks ago and found nothing... so I let it be, but I really feel like if there was one improvement to make to the layout I am working on, it would be (e.g. navigation on this page) the ability to make it so that when you are on a certain page the navigation appears as it does when hovered on. I was thinking this would be some kind of if operator through the .tpl files, because it wouldn't seem to make sense it being anywhere else. However, the problem with this logic as well would be that page.tpl files would all appear as either (1) the services or (2) about us section, being as they are both going to be governed by the page.tpl file with the skin I have designed. So, the only logical way I can think would be an IF operator that says "Hey, what's the url?" If it's page.php?c=about or page.php=?c=services, as well as it may be page.php?id=#, as I have not determined how I really feel I want the Services section displayed. I'm guessing some kind of global operator that creates a {SERVICES_ONOFF} or something would be easily able to be done as that could switch the ID to show the hover element of #services:hover or maybe just something that I could say... um maybe... style="background-position: 0 -53px;" would be easily done as well, actually would probably seem more effecient as I wouldn't have to create #home:hover, #about:hover, etc. What's the trick? These are all my brainstorms. Hopefully, I didn't lose you. URL: http://bhconstruction.comuf.com Username: tester4 Password: cotonti1234 In case, you want to see it. The FOOTER is NOT finished so don't crit me about no Cotonti Powered type thing at the bottom, I'll get to it. I'm still unsure of how I want the bottom to display. Also, places where announcements drops down are well known about in the pfs and the pages, not like you'll be able to see it, but yeah. Gimme any crits you have other than that! Thanks.
This post was edited by peptobismal (2012-02-24 21:00, 12 years ago)

peptobismal

#1 2012-02-24 20:51

Okay, so I have looked fairly through the documentation provided a couple of weeks ago and found nothing... so I let it be, but I really feel like if there was one improvement to make to the layout I am working on, it would be (e.g. navigation on this page) the ability to make it so that when you are on a certain page the navigation appears as it does when hovered on. I was thinking this would be some kind of if operator through the .tpl files, because it wouldn't seem to make sense it being anywhere else.

However, the problem with this logic as well would be that page.tpl files would all appear as either (1) the services or (2) about us section, being as they are both going to be governed by the page.tpl file with the skin I have designed. So, the only logical way I can think would be an IF operator that says "Hey, what's the url?" If it's page.php?c=about or page.php=?c=services, as well as it may be page.php?id=#, as I have not determined how I really feel I want the Services section displayed.

I'm guessing some kind of global operator that creates a {SERVICES_ONOFF} or something would be easily able to be done as that could switch the ID to show the hover element of #services:hover or maybe just something that I could say... um maybe... style="background-position: 0 -53px;" would be easily done as well, actually would probably seem more effecient as I wouldn't have to create #home:hover, #about:hover, etc.

What's the trick? These are all my brainstorms. Hopefully, I didn't lose you.

URL: http://bhconstruction.comuf.com
Username: tester4
Password: cotonti1234

In case, you want to see it. The FOOTER is NOT finished so don't crit me about no Cotonti Powered type thing at the bottom, I'll get to it. I'm still unsure of how I want the bottom to display. Also, places where announcements drops down are well known about in the pfs and the pages, not like you'll be able to see it, but yeah. Gimme any crits you have other than that! Thanks.

This post was edited by peptobismal (2012-02-24 21:00, 12 years ago)

Kort	#2 2012-02-25 06:56
Team Thanked: 188 times	The easiest way is to check category code, plugin code, page alias or id like: <div class="block"> <h3>{PHP.L.Fint_more}</h3> <ul id="aboutUs"> <li><a href="{PHP\|cot_url('page','c=who-we-are')}"<!-- IF {PHP.c} == "who-we-are" OR {PHP.al} == about --> class="sel"<!-- ENDIF -->>{PHP.L.Who_we}</a></li> <li><a href="{PHP\|cot_url('page','c=what-we-do')}"<!-- IF {PHP.c} == "what-we-do" --> class="sel"<!-- ENDIF -->>{PHP.L.What_we}</a></li> <li><a href="{PHP\|cot_url('page','c=portfolio')}"<!-- IF {PHP.c} == "portfolio" --> class="sel"<!-- ENDIF -->>{PHP.L.Our_work}</a></li> <li><a href="vacancies"<!-- IF {PHP.al} == "vacancies" --> class="sel"<!-- ENDIF -->>{PHP.L.Vacancies}</a></li> <li><a href="{PHP\|cot_url('plug','e=contact')}"<!-- IF {PHP.e} == "contact" --> class="sel"<!-- ENDIF -->>{PHP.L.Get_in}</a></li> </ul> </div> SED.by - создание сайтов, разработка плагинов и тем для Котонти

Kort

#2 2012-02-25 06:56

Team
Thanked: 188 times

The easiest way is to check category code, plugin code, page alias or id like:

<div class="block">
	<h3>{PHP.L.Fint_more}</h3>
	<ul id="aboutUs">
		<li><a href="{PHP|cot_url('page','c=who-we-are')}"<!-- IF {PHP.c} == "who-we-are" OR {PHP.al} == about --> class="sel"<!-- ENDIF -->>{PHP.L.Who_we}</a></li>
		<li><a href="{PHP|cot_url('page','c=what-we-do')}"<!-- IF {PHP.c} == "what-we-do" --> class="sel"<!-- ENDIF -->>{PHP.L.What_we}</a></li>
		<li><a href="{PHP|cot_url('page','c=portfolio')}"<!-- IF {PHP.c} == "portfolio" --> class="sel"<!-- ENDIF -->>{PHP.L.Our_work}</a></li>
		<li><a href="vacancies"<!-- IF {PHP.al} == "vacancies" --> class="sel"<!-- ENDIF -->>{PHP.L.Vacancies}</a></li>
		<li><a href="{PHP|cot_url('plug','e=contact')}"<!-- IF {PHP.e} == "contact" --> class="sel"<!-- ENDIF -->>{PHP.L.Get_in}</a></li>
	</ul>
</div>

SED.by - создание сайтов, разработка плагинов и тем для Котонти

peptobismal	#3 2012-02-26 20:43
Members	Okay, well, I almost said screw it after reading your reply, but my problem is this: my menu items are not really set as list items just <a> tags that have :hover elements in the CSS. So, is there a way to modify this so it works? Maybe it would be easier for me to do this if I set all the :hover's to a new class of "sel" for instance and have that control the background-position attributes as they are all the same height.

peptobismal

#3 2012-02-26 20:43

Members

Okay, well, I almost said screw it after reading your reply, but my problem is this: my menu items are not really set as list items just <a> tags that have :hover elements in the CSS. So, is there a way to modify this so it works?

Maybe it would be easier for me to do this if I set all the :hover's to a new class of "sel" for instance and have that control the background-position attributes as they are all the same height.

ez	#4 2012-02-26 22:24
Contributors Thanked: 10 times	For what i understand... You want your current, choosen, menu item to be highlited ??? You can use Jquery to do just that... But there are a few steps. 1) make a class in your css called mhover-a with your ( background-position: 0 -53px; ) hover specs 2) as an example i take your list.tpl.. Add a little javascript like on top right after the start <script type="text/javascript"> var pagelocation="{LIST_CAT}"; </script> 3) in your footer.tpl add a bit javascript: $(document).ready(function() { $('#navigation').children().removeClass('mhover-a'); if (typeof pagelocation === "string") { $('#navigation').find('#'+pagelocation).addClass('mhover-a'); } }); 4) make sure your menu id's are the same as the LIST_CAT If you use pages... add step 2 on the page.tpl.. and pagelocation={PAGE_ALIAS} or maybe the id If you use a plugin you can use the plugin identifier (also step 2) Hope i did not forget anything here.... this was a quick search for your answer ==- I say: Keep it EZ -==

#4 2012-02-26 22:24

Contributors
Thanked: 10 times

For what i understand...
You want your current, choosen, menu item to be highlited ???

You can use Jquery to do just that...
But there are a few steps.

1) make a class in your css called mhover-a with your ( background-position: 0 -53px; ) hover specs
2) as an example i take your list.tpl..
Add a little javascript like on top right after the start

<script type="text/javascript">
		var pagelocation="{LIST_CAT}";
	</script>

3) in your footer.tpl add a bit javascript:

$(document).ready(function() {
$('#navigation').children().removeClass('mhover-a');
if (typeof pagelocation === "string") {
$('#navigation').find('#'+pagelocation).addClass('mhover-a');
}
});

4) make sure your menu id's are the same as the LIST_CAT

If you use pages... add step 2 on the page.tpl.. and pagelocation={PAGE_ALIAS} or maybe the id
If you use a plugin you can use the plugin identifier (also step 2)

Hope i did not forget anything here.... this was a quick search for your answer

==- I say: Keep it EZ -==

peptobismal	#5 2012-03-03 16:59
Members	I'll give it a run around when I get back from running errands and see how it goes.