CSS菜单栏样式表菜单不呈现

时间:2017-07-19 16:17:00

标签: javascript css

我有一个项目,需要一个CSS菜单栏,在HTML页面的右侧有一个概述面板面板。我的问题是CSS菜单栏样式表菜单不呈现。试图让这个CSS菜单栏工作,然后扩展内容链接,登录,仪表板等的代码功能。

代码:标记

<header class='header'>
    <div class='header_top-bar'>
        <div class='top-bar_title'>
            <a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
            <div class='ajax-loader' id='ajax-loader'>
                <div class='ajax-loader_animator'></div>
            </div>
        </div>
        <div class='top-bar_toggle' id='menu_toggle'>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-- <div class='top-bar_share' id='share_toggle'>
            <span class='underline--white'>
                SHARE
            </span>
        </div> -->
        <div class='top-bar_menu' id='overlay_menu'>
            <ul class='menu_container'>
                <li class='menu_item'>
                    <span>.01.</span>
                    <a class='link-ajax' href='/'>Home</a>
                </li>
                <li class='menu_item'>
                    <span>.02.</span>
                    <a class='link-ajax' href='/project'>Athena Customers</a>
                </li>
                <li class='menu_item'>
                    <span>.03.</span>
                    <a class='link-ajax' href='/wines'>Athena Services</a>
                </li>
                <li class='menu_item'>
                    <span>.04.</span>
                    <a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
                </li>
                <li class='menu_item'>
                    <span>.05.</span>
                    <a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
                </li>
            </ul>

            <div class='language-chooser menu_item'>
                <div class='masi-agricola_wrapper hide-on-mobile'>
                    <a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
                        <img src='images/agricola.png' data-image='images/agricola.png'/>
                    </a>
                </div>
                <p class='text--subtitle'>select your language</p>
                <span class='language-link'><a class='' href='/en/'>Eng</a></span>
                <span class='line-break'></span>
                <span class='language-link'><a class='' href='/es/'>Esp</a></span>
                <span class='line-break'></span>
                <span class='language-link'><a class='' href='/it/'>Ita</a></span>
            </div>
        </div>
    </div>
</header>

代码:内容部分

<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">  
    <section class="main-content clearfix homepage">
        <div class="main-content_background">
            <div class="half_screen full-height-desk" id="biggest_block">
                <a href="project" class="">
                    <div class="text-block">
                        <div class="full-image_header page-header">
                            <h1 class="page-header_title text--title">
                                Athena Intelligence Earth's Essential Data
                            </h1>
                            <strong class="page-header_subtitle text--subtitle">
                                Athena Intelligence Login
                            </strong>
                        </div>
                        <img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
                    </div>
                </a>
            </div>
            <div class="half_screen full-height-desk">
                <a href="wines">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Athena: Many industries: all use Land, Food, Energy, Water
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    The Gods: Land, Food, Energy, Water
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
                        </div>
                    </div>
                </a>
                <a href="sustainability" class="">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Land, Food, Energy, Water: Sustainability
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    Athena : Dedication To Land, Food, Energy, Water
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
                        </div>
                    </div>
                </a>
                <a href="hospitality">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Land, Food, Energy, Water: Hospitality
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    Land, Food, Energy, Water: That Welcomes You
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
                        </div>
                    </div>
                </a>
            </div>
            </div>
    </section>

代码:标题栏包装标签

    <div class='out-loader_wrapper'>
        <div class='out-loader'>
            <div class='filler' id='filler'>
                <img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
            <div class='filler-bar'></div>
            <p class='text--title' id='loader_text'>0</p>
        </div>
     </div>
</div>

1 个答案:

答案 0 :(得分:0)

鉴于您没有发布完整的HTML,我无法判断您是否正确链接样式表。 HTML中没有任何内容看起来不合适,这意味着如果您无法看到呈现的样式,那么样式表未正确链接到文档,或者如果您使用预处理器则未正确导入样式表像SASS或LESS。

但是,您可以尝试以下方法:

  1. 请确保您在文档“<head> <link href="path/to/your/menu-stylesheet.css rel="stylesheet"> @import 'path/to/stylesheet.less中正确链接。
  2. 如果您要关联多个样式表,请务必按正确顺序链接它们。这意味着如果引用在另一个样式表中声明的类或样式,则必须确保链接在作为引用的样式表之前引用的样式表。
  3. 如果您正在使用预处理器,请确保正确导入样式表,如axis(请注意正确的扩展名,无论您的情况如何。
  4. 如果您正在使用像grunt或gulp这样的任务运行器,则可以将样式表连接到一个样式表中。