asp.net - RadMenu のスタイリング

Question

メニューを使っていろいろやりたいのですが、なかなかまとまらず…。

フォントを太字にするフォントサイズを大きくする境界線の色を赤にする項目を (左ではなく) 一番右に揃える

誰かがこれを達成する方法を教えてもらえますか?

以下は、私のマークアップです..

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage0.master.cs"
    Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="App_Themes/style0.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.core.js"></script>
    <script type="text/javascript" src="js/jquery.superfish.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/jquery.scripts.js"></script>
    <title>Network Performance Portal</title>
    <link rel="stylesheet" href="style000.css" type="text/css" media="screen" />
    <style type="text/css">
        div.RadMenu2
        {
            float: right;
        }
    </style>
</head>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript1.5"></script>
<asp:contentplaceholder id="head" runat="server">
    </asp:contentplaceholder>
<body>
    <header>
        <div id="wrap">
            <div class="top_corner">
            </div>
            <div id="main_container">
                <div id="header">
                    <div id="logo">
                        <a href="http://wmsatsea.com/">
                            <img src="images/wmslogo.png" alt="" title="" border="0" /></a></div>
                </div>
                <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                </telerik:RadScriptManager>
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        <telerik:RadMenu ID="RadMenu2" runat="server" Width="85%" Font-Bold="true" Font-Size="Large"
                            BorderColor="Red">
                            <Items>
                                <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Reports">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Satellite Availability"
                                            NavigateUrl="SatReport_Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Call Attempts"
                                            NavigateUrl="CA_Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Minutes of Usage"
                                            NavigateUrl="MinUsage_Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Dropped Call %"
                                            NavigateUrl="Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Call Success Rate %"
                                            NavigateUrl="Success_Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="CrewzFone Sales"
                                            NavigateUrl="Crewzfone_Sales.aspx" />
                                    </Items>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Contact Us" NavigateUrl="http://wmsatsea.com/default.aspx">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="WMS Website" NavigateUrl="http://wmsatsea.com/">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Revenue">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Revenue" NavigateUrl="~/Revenue/ManageSubscriptions.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="SMS Count" NavigateUrl="MobileSMS_Container.aspx" />
                                        <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Carrier Activity"
                                            NavigateUrl="MoActivity_Container.aspx" />
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </asp:ContentPlaceHolder>
                </div>
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <br />
                <br />
                <br />
                <br />
                </form>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </header>
    <footer>
        <div id="footWrap">
            <div id="footPanel">
                <div id="footNav">
                    <ul>
                        <li></li>
                        <li><a href="#">Home</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Online Support</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Solutions</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Site Map</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Report Requests</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Projects</a></li>
                        <li>
                            <div class="blank">
                                |</div>
                        </li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <div id="copyright">
                    <p>
                        © Copyright WMS. All Rights Reserved.</p>
                </div>
                <p>
                    Designed By: Software Development Team</p>
            </div>
        </div>
    </footer>
</body>
</html>

score 2 · Accepted Answer

！重要

これは、 RadMenu でやりたいことを実行するために知っている最も重要なことです。

EnableEmbeddedSkins2 つ目は、プロパティを falseに設定することです。

いくつかのリンク:

また、簡単に表示するには、次のタグを使用して RadMenu のテキストを変更できます。

.RadMenu .rmItem .rmExpandDown- 「ヘッダー」メニューのみ。
.RadMenu .rmText- すべてのテキストメニュー

score 0 · Accepted Answer

telerikのcssをオーバーライドする必要があります。これを最も効率的に行うには、viewsourceとfirebugの組み合わせを使用します。また、radmenuのcssクラス階層とのこの素晴らしいリンクは、過去に私をバケツにするのに役立ちました。

http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-file.html

asp.net - RadMenu のスタイリング

2 に答える 2

！重要

Related

Reference