javascript - CSS 没有格式化 ActionLinks

标签 javascript html css

我有一个与 ActionLinks 共享的布局，用于在页面之间移动。我有一个元素，我之前只是为了好玩而工作，并且试图重新创建我在该元素的导航菜单上使用的格式效果，因为我真的很喜欢它的外观并且它是一个响应式菜单。出于某种原因，我无法获得使用 CSS 设置格式的链接。

这是共享布局:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Onboarding Practice</title>
        @Styles.Render("~/Content/Site.css")
        @Scripts.Render("~/bundles/modernizr")
        <script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/responsivemobilemenu.js")" type="text/javascript"></script>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="box-effect">
            <div class="web-header">
                PrimeRCM Onboarding App
            </div>
            <div class="rmm">
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Patients", "Patients", "Patients")</li>
                    <li>@Html.ActionLink("Practices", "Practices", "Practices")</li>
                </ul>
            </div>
            <div id="body-content">
                @RenderSection("featured", required: false)
                <section class="content-wrapper clear-fix">
                    @RenderBody()
                </section>
            </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        </div>
    </body>
</html>

ActionLinks 的导航菜单 CSS

/********Navigation Menu********/           
/*#region*/
.rmm {
    display:block;
    position:relative;
    width:100%;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ebebeb;
    text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}


.rmm .rmm-main-list li {
    display:inline;
    padding:0px;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}

/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #333333;
    background-color:#444444;
    border-left:1px solid #555555;
    background-image:url('../Images/BorderImages/graphite-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
    background-image:url('../Images/BorderImages/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
    width:95%;
    background-color:#555555;
    min-height:36px;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../Images/BorderImages/graphite-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
    display:block;
    position:absolute;
    right:15px;
    top:8px;
}

.rmm.graphite .rmm-button span {
    display:block;
    margin-top:4px;
    height:2px;
    background:white;
    width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#555555;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #333333;
    border-top:1px solid #777777;
    text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
    background-color:#444444;
    border-bottom:1px solid #444444;
    border-top:1px solid #444444;
}

/* MINIMAL STYLE */

.rmm.minimal a {
    color:#333333;
}
.rmm.minimal a:hover {
    opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:95%;
    min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#333333;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
    color:#333333;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}

.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#333333;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #dedede;
    color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}
/*#endregion*/

这是与响应式设计的导航菜单一起使用的 javascript 文件:

function responsiveMobileMenu() {   
        $('.rmm').each(function() {

            $(this).children('ul').addClass('rmm-main-list');   // mark main menu list

            var $style = $(this).attr('data-menu-style');   // get menu style
                if ( typeof $style == 'undefined' ||  $style == false )
                    {
                        $(this).addClass('graphite'); // set graphite style if style is not defined
                    }
                else {
                        $(this).addClass($style);
                    }

            /*  width of menu list (non-toggled) */
            var $width = 0;
                $(this).find('ul li').each(function() {
                    $width += $(this).outerWidth();
                });

            // if modern browser    
            if ($.support.leadingWhitespace) {
                $(this).css('max-width' , $width*1.05+'px');
            }
            // 
            else {
                $(this).css('width' , $width*1.05+'px');
            }
        });
}
function getMobileMenu() {

    /*  build toggled dropdown menu list */
    $('.rmm').each(function() { 
                var menutitle = $(this).attr("data-menu-title");
                if ( menutitle == "" ) {
                    menutitle = "Menu";
                }
                else if ( menutitle == undefined ) {
                    menutitle = "Menu";
                }
                var $menulist = $(this).children('.rmm-main-list').html();
                var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
                $(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
        });
}

function adaptMenu() {

    /*  toggle menu on resize */
    $('.rmm').each(function() {
            var $width = $(this).css('max-width');
            $width = $width.replace('px', ''); 
            if ( $(this).parent().width() < $width*1.05 ) {
                $(this).children('.rmm-main-list').hide(0);
                $(this).children('.rmm-toggled').show(0);
            }
            else {
                $(this).children('.rmm-main-list').show(0);
                $(this).children('.rmm-toggled').hide(0);
            }
        }); 
}

$(function() {
     responsiveMobileMenu();
     getMobileMenu();
     adaptMenu();

     /* slide down mobile menu on click */ 
     $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
        if ( $(this).is(".rmm-closed")) {
             $(this).find('ul').stop().show(300);
             $(this).removeClass("rmm-closed");
        }
        else {
            $(this).find('ul').stop().hide(300);
             $(this).addClass("rmm-closed");
        }   
    }); 
});
    /*  hide mobile menu on resize */
$(window).resize(function() {
    adaptMenu();
});

最佳答案

好的，所以我解决了自己的问题，这都是因为我试图引用错误的脚本。我的淘汰脚本是 2.2.0 版，我的 jquery 脚本是 1.8.2 而不是我认为的。我只是在创建新元素时没有注意版本。

关于javascript - CSS 没有格式化 ActionLinks，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27987452/

上一篇：html - 带有图像的 Outlook HTML 电子邮件

下一篇：javascript - 如何在 python 应用程序中高效地提供 JS 和 CSS

相关文章：

Javascript正则表达式再次测试没有特殊字符或空格的单个字符串

html - 填充不适用于 div 图标

css - 保持最后两个元素环绕在一起

javascript - 触发父级点击事件而不是子级点击事件 jQuery+salesforce

javascript - 是否在每个循环中评估 for 循环中的条件？

javascript - 在删除一个组件时，它会在可删除组件上多次添加它

javascript - AngularJS 中的日期字段

html - 如何修改 Bootstrap 的卡片列？

php - 如何使用 css 拉伸(stretch)背景图像

css - django 1.8 管理站点 css 问题，而 css 文件加载正常

©2024 IT工具网  联系我们