- PR -

サイトマップデータソースおよびリピータを利用したナビゲーションについて

1
投稿者投稿内容
あかり
常連さん
会議室デビュー日: 2009/02/18
投稿数: 38
投稿日時: 2009-03-31 15:43
お世話になっております。
サイトマップファイルおよびリピータを使用した、
水平型メニューを作成したいのですが、
選択中のページをメニューの状態に反映させたいのですが、
うまくいきません、どうすればよいのでしょうか？

Styleシートのa.currentで表示中のページのメニューが変化するつもりでいたのですが、まったく変化しません。

現状表示およびホバーの確認まではできているのですが、
選択中のページだけはうまくいっていません。
イメージとしては、
表示中のページはホバー状態と同じ表示にできればと考えています。
よろしくお願いいたします。

下記がコードです。

SiteMap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="dummy.aspx" title="dummy" description="ダミー">
<siteMapNode url="~/Default.aspx" title="ホーム" description="ホーム"/>
<siteMapNode url="~/Default1.aspx" title="ページ1" description="ページ1"/>
<siteMapNode url="~/Default2.aspx" title="ページ2" description="ページ2"/>
<siteMapNode url="~/Default3.aspx" title="ページ3" description="ページ3"/>
<siteMapNode url="~/Default4.aspx" title="ページ4" description="ページ4"/>
<siteMapNode url="~/Default5.aspx" title="ページ5" description="ページ5"/>
</siteMapNode>
</siteMap>

StyleSheet
#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}


#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

ページ
<div id="menu">
　　<asp:Repeater ID="Repeater1" runat="server"
DataSourceID="SiteMapDataSource1"
EnableViewState="false">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<%#
String.Format("<li class='{0}'><a href='{1}'>{2}</a></li>", Container.DataItem.GetType, Eval("url"), Eval("title"))
%>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
ShowStartingNode="false" />
</div>
あかり
常連さん
会議室デビュー日: 2009/02/18
投稿数: 38
投稿日時: 2009-04-01 16:20
お疲れ様です、無事に自己解決することができました。
http://jsajax.com/aspajax/default.aspx
のホームページをもとに解決することができました。

以下の関数を定義し、カレントノードの場合は<a>のクラスにactiveをセットできるようにします。

Protected Function GetClass(ByVal node As SiteMapNode) As String
Dim siteMap8 As SiteMapProvider = SiteMap.Providers("webconfigに定義しているサイトマップ名")

If siteMap8.CurrentNode Is Nothing Then
Return ""
End If
If siteMap8.CurrentNode.Equals(node) OrElse _
siteMap8.CurrentNode.IsDescendantOf(node) Then
Return "current"
End If
Return ""
End Function

次に上記の関数を使用し、カレントノードの場合はclass名にcurrentがセットされるようにします。

<ItemTemplate>
<%#
String.Format("<li><a class='{0}' href='{1}'>{2}</a></li>", Getclass(Container.DataItem), Eval("url"), Eval("title"))
%>
</ItemTemplate>

これで、以下のスタイルシートでの定義が有効になります。
#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

閲覧していただき、まことにありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）