none
Menuコントロールで横スクロールさせると展開されるメニューがずれて表示される RRS feed

  • 質問

  • はじめまして。
    Visual Studio 2005、C# ASP.NET、IE6 にて開発をおこなっております。

    Menuコントロールを使用し、
    メインメニューを横展開、サブメニューを下方向に展開させようとしています。

    メインメニューが横に長くなるケースがあるので、DIVで囲って横スクロールさせようとしているのですが、
    横スクロール後にサブメニューを展開させると本来の位置より、ずれて表示されてしまい、
    自分なりに調査いたしましたが、解決策が見つからず困っております。

    DIV 及び MENUの構成は以下のようにしております。
    =======================================================
        <div style="width: 100%; height: 120px; overflow-x:auto;">
            <asp:Menu ID="Menu1" runat="server" BorderWidth="1px" DynamicHorizontalOffset="2" Font-Bold="True"
                    Font-Names="ms pgothic" Font-Size="Medium" Orientation="Horizontal"
                    StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="10px" Width="980px" SkipLinkText="">
                <StaticMenuItemStyle BorderStyle="Solid" BorderWidth="1px" Font-Size="16px" HorizontalPadding="10px" VerticalPadding="2px" />
                <DynamicHoverStyle BorderStyle="Double" BorderWidth="1px" Font-Size="16px" />
                <DynamicMenuItemStyle Font-Size="16px" HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticHoverStyle Font-Size="16px" />
                <Items>
                    <asp:MenuItem Text="メニュー1" Value="メニュー1">
                        <asp:MenuItem Text="メニュー11" Value="メニュー11"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー12" Value="メニュー12"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー13" Value="メニュー13"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="メニュー2" Value="メニュー2">
                        <asp:MenuItem Text="メニュー21" Value="メニュー21"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー22" Value="メニュー22"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー23" Value="メニュー23"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="メニュー3" Value="メニュー3">
                        <asp:MenuItem Text="メニュー31" Value="メニュー31"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー32" Value="メニュー32"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー33" Value="メニュー33"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="メニュー4" Value="メニュー4">
                        <asp:MenuItem Text="メニュー41" Value="メニュー41"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー42" Value="メニュー42"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー43" Value="メニュー43"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="メニュー5" Value="メニュー5">
                        <asp:MenuItem Text="メニュー51" Value="メニュー51"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー52" Value="メニュー52"></asp:MenuItem>
                        <asp:MenuItem Text="メニュー53" Value="メニュー53"></asp:MenuItem>
                    </asp:MenuItem>               
                </Items>
            </asp:Menu>
        </div>
    =======================================================

    対応策等がございましたら、お手数ですがご教授お願いします。

    2009年4月15日 9:56

すべての返信

  • div タグの横スクロールを使わず、ブラウザの横スクロールに頼ってはいかがですか? アップされたコー
    ドで、Menu を囲っている div タグをすべて削除して試してみてください。
    2009年4月15日 13:52
  • ○ SurferOnWww様

    ご返信、ありがとうございます。

    DIVタグにしているのは、メニュー部分を上部に固定したいと考えているためです。
    実際のアプリケーションは、上部に横スクロール可能なナビゲーションバー、下部に縦・横スクロール 共に可能なメインコンテンツを配置いたします。

    今回はFrameを使用せず、CSSで実現しようとしているため、このような構成となっています。

    説明足らずで申し訳ありませんでした。

    2009年4月16日 1:38
  • > 横スクロール後にサブメニューを展開させると本来の位置より、ずれて表示されてしまい、

    サブメニューの位置がずれるというより、スクロールでメインメニューが表示される位置が変
    わっても、サブメニューがポップアップされる位置(ブラウザ本体との相対的な位置)は変わ
    らないということのようです。

    お役に立てずすみませんが、それを解決する方法は自分には分かりません。

    メニューを複数行にするなどして規定の幅におさめて、スクロールしないで済ませるようにす
    るぐらいしか解決策はなさそうな気がします。

     

    2009年4月16日 15:29