PDA

View Full Version : Add "active page"-class to a menu imported with SSI?


henryhayes
08-15-2011, 02:42 PM
Tricky question which might not be solved..? But ill give it a try anyway, maybe someone else has the brains to figure it out:

In the menu i have added a class with a different color for pointing out which item in menu is currently selected. In this ex item 2 is selected:

<div id="ddmenuwrap" >

<ul id="ddmenu">
<li><a href="index.shtml" >Item 1</a></li>

<li><a href="item-2.shtml" class="menuselected">Item 2</a></li>
</ul>

</div><!-- END OF DD-MENU-->

When i store the above menu in a remote document and import it into the .shtml as a Server Side Include (SSI), it will look like this:

<div id="ddmenuwrap" >
<!--#include virtual="/site/ssi/menu.html"-->
</div><!-- END OF DD-MENU-->

Is there any way i can still use class="menuselected" for pages currently selected, when the menu is imported with SSI?

domedia
08-15-2011, 08:20 PM
Not with a simple include, no.

DWcourse
08-15-2011, 09:40 PM
This video explains how to highlight the current page in a Spry menubar on a template-based page but the method used should give you an idea of what's involved in doing what you want: http://www.dwcourse.com/dreamweaver/highlighting-current-page-template.php

henryhayes
08-15-2011, 10:14 PM
Thx for reply Domedia.
Thats what i thought.

Using SSI for "remote" controlling entire dropdown-menu for +30 pages is time-saving + flexible.

But your answer contains the word "simple".. do you have an idea of which direction to go when using a complicated solution?

henryhayes
08-15-2011, 10:16 PM
DWcourse you posted while i was typing. Ill take at look at the link. Thanks

ranjan
08-16-2011, 04:09 AM
Code:

http://jsbin.com/uyiziz/edit#javascript,html

In Action:
http://jsbin.com/uyiziz/edit#preview

domedia
08-16-2011, 02:04 PM
Hi Ranjan,

Is this all related to SSI, is that why I don't understand it?

It's great to see you name again on the forms btw!

ranjan
08-16-2011, 10:09 PM
Is this all related to SSI, is that why I don't understand it?

I dont get your question

It's great to see you name again on the forms btw!

Thanks

domedia
08-17-2011, 04:15 AM
I dont get your question
Nevermind, I was trying to get your example to work, and I was confuzzled why it didn't.

Do you know the browser support for HTML 5 custom data attributes?

ranjan
08-17-2011, 05:05 AM
Browser support is good for all A grade browser and IE6

For the HTML below:

<div id="test" data-test="tester">



var t = document.getElementById('test');
console.log(t.dataTest);


should work.

Also you can use getAttribute if you want to access the data attrib

However jquery makes using the data attrib really exciting.

http://api.jquery.com/data
http://api.jquery.com/jQuery.data/
http://api.jquery.com/jQuery.hasData/
http://api.jquery.com/removeData/

henryhayes
08-18-2011, 11:09 AM
Ive run to next problem using SSI for menu..sigh!

HTML5 is still somewhere above my head, so i went for solution using <body id="selected"> which works fine.

Problem is im actually using a dropdown and using the body / li-class -solution doesnt cover the use of hover on submenu-items on selected pages. A little confusing in words, but i hope you get the picture by looking at code.

So question is: how to maintain hover-effect on submenu-items on selected-pages?

HTML
<body id="home"> ..or else.. <body id="pages">
<div id="ddmenuwrap" >
<!--#include virtual="/site/ssi/ddmenu.html"-->
</div> <!-- END OF DDMENUWRAP-->

SSI-doc
<ul id="ddmenu">
<li id="home"><a href="/site/index.shtml">Home</a>
</li>

<li id="pages"><a href="/site/shtml/page1.shtml">Page 1</a>
<ul>
<li><a href="/site/shtml/page1.shtml">Page 1</a></li>
<li><a href="/site/shtml/page2.shtml">Page 2</a></li>
</ul>
</li>
</ul>

CSS

body#home li#home a,
body#pages li#pages a {
color: #c0c0f1;
background: transparent;
width: 132px;
display: block;
}

henryhayes
08-18-2011, 02:55 PM
Ok i figured it out:

"body#home li#home a" in css applies to all "a" elements contained in <li>, including the submenu / sub-items.

So i had to be more specific in order to control the submenu / sub-items, which are also "a"-elements, by adressing the styling to "ul li a".

This styling is added to previously posted CSS in order to control submenu default color etc and submenu-hover:

CSS
body#home #home ul li a,
body#pages #pages ul li a {
background: #0FC;
color: #C09;
}

body#home #home ul li a:hover,
body#pages #pages ul li a:hover {
background: #C30;
color: #6C6;
}