Javascript 自定义CSS和JS驱动的导航菜单_Javascript_Css_Navigation

Javascript 自定义CSS和JS驱动的导航菜单

javascript css navigation

Javascript 自定义CSS和JS驱动的导航菜单,javascript,css,navigation,Javascript,Css,Navigation,我有一个用于网站的菜单，它使用一些javascript来创建一些淡入淡出的效果。我遇到的问题是，在主链接之一悬停在上方之前，子菜单不可见。子菜单的样式表将调出display:none，这在加载页面时显然不会显示任何内容。我希望立即显示子菜单，因为它在我的设计中可见。该网站是我试图删除display:none行，它使子菜单的所有实例都可见，这不是很漂亮：）任何帮助都将不胜感激。我是否需要以某种方式重组部门？我创建这个网站时，我还是一个樱桃在css。我现在知道的更多，但显然，我仍然感到困惑：P您

我有一个用于网站的菜单，它使用一些javascript来创建一些淡入淡出的效果。我遇到的问题是，在主链接之一悬停在上方之前，子菜单不可见。子菜单的样式表将调出

display:none

，这在加载页面时显然不会显示任何内容。我希望立即显示子菜单，因为它在我的设计中可见。该网站是

我试图删除

display:none

行，它使子菜单的所有实例都可见，这不是很漂亮：）

任何帮助都将不胜感激。我是否需要以某种方式重组部门？我创建这个网站时，我还是一个樱桃在css。我现在知道的更多，但显然，我仍然感到困惑：P

您可以添加以下css规则：

#visitors.submenustyle {
 display: block;
}

使用JQuery应该可以相当轻松地完成这项工作。您需要向CSS中添加另一个类，该类将覆盖您设置的“submenustyle”类。在下面的示例中，“活动”类将具有以下属性代码：

.active{display:block}

然后将以下内容放在对Jquery库文件的引用的标题中：您可以使用Google托管(https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js)

$（“ul#maintab li a”）。悬停（函数（）{
var getvalue=$（this.attr（'rel'）；
$（getvalue）.toggleClass（“活动”）
}
);
这将为您显示和隐藏缺少的功能。如果要添加淡入淡出，可以向脚本添加持续时间，如下所示，其中数字是完成过渡所需的时间：
$（“ul#maintab li a”）。悬停（函数（）{
var getvalue=$（this.attr（'rel'）；
$（getvalue）.toggleClass（“活动”，500）
}
);
我相信，如果在rel名称之前添加“#”，这会起作用。
我的第一个建议是利用：hover
伪类重新构造并使用CSS（无JavaScript）
下面是一个示例，说明了什么是：
<!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" xml:lang="en" lang="en" >
    <head>
        <title>Customizing a CSS and JS driven navigation menu</title>
        <style type="text/css">
            #maintab {
                position:relative;
                top:0px;
                left:0px;
                height:50px;
                margin:0px;
                padding:0px;
            }
            #maintab li {
                float:left;
                margin:0px;
                padding:2px;
                padding-bottom:22px;
                list-style:none;
            }
            #maintab .submenustyle {
                position:absolute;
                top:25px;
                left:0px;
                display:none;
            }
            #maintab #visitors {
                display:block;
            }
            #maintab li:hover .submenustyle {
                display:block;
            }
        </style>
    </head>
    <body>
        <ul class="basictab" id="maintab">
            <li rel="visitors" rev="maintab">
                <a href="#">Visitors</a>
                <div class="submenustyle" id="visitors">
<a href="calendar_events.php">Calendar Events</a>
<a href="stay.php">Lodging</a>
<a href="eat.php">Dining</a>
<a href="arts.php">Arts/Heritage/Culture</a>
<a href="attractions.php">Attractions</a>
<a href="outdoor_rec.php">Outdoor Recreation</a>
<a href="shopping.php">Shopping</a>
<a href="transportation.php">Transportation</a>
<a href="resources.php">Resources</a>
<a href="request_travel_planner.php">Request Travel Planner</a>
<a href="map.php">Vicinity Map</a></div>
            </li>
            <li rel="planners" rev="maintab">
                <a href="#">Meeting Planners</a>
                <div class="submenustyle" id="planners">
<a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
<a href="request_planner.php">Request Meeting Planners Guide</a>
<a href="request_proposal.php">Request for Proposal</a></div>
            </li>
            <li rel="media" rev="maintab">
                <a href="#">Media</a>
                <div class="submenustyle" id="media">
<a href="media_form.php">Request For Media Form</a>
<a href="#"></a></div>
            </li>
            <li rel="members" rev="maintab">
                <a href="#">Members</a>
                <div class="submenustyle" id="members">
<a href="../events_news.php">News/Events</a>
<a target="_blank" href="MembershipBenefits.pdf">Member Benefits Brochure</a>
<a href="members.php">Become a Member</a>
<a href="members_directory.php">Business Directory</a>
<a href="staff.php">Contact Staff</a></div>
            </li>
            <li rel="about" rev="maintab">
                <a href="about.php">About Us</a>
                <div class="submenustyle" id="about">
<a href="about.php">About VCB</a>
<a href="contacts.php">VCB Address and Phone Numbers</a>
<a href="map.php">Vicinity Map</a>
<a href="careers.php">Careers</a></div>
            </li>
            <li rel="deals" rev="maintab">
                <a href="deals.php">Deals</a>
                <div class="submenustyle" id="deals">
<a href="deal_event.php">Capitol Experience</a>
<a href="deal_hotel.php">Hotel Packages</a>
<a href="deal_more.php">More Deals</a>
</div>
            </li>
        </ul>
    </body>
</html>


自定义CSS和JS驱动的导航菜单
#主选项卡{
位置：相对位置；
顶部：0px；
左：0px；
高度：50px；
边际：0px；
填充：0px；
}
#主表李{
浮动：左；
边际：0px；
填充：2px；
填充底部：22px；
列表样式：无；
}
#maintab.子菜单样式{
位置：绝对位置；
顶部：25px；
左：0px；
显示：无；
}
#主选项卡#访客{
显示：块；
}
#maintab li:悬停子菜单样式{
显示：块；
}















此解决方案有两个优点：
构建导航菜单是一种更为传统的方式
即使JavaScipt被禁用或崩溃，它也能工作
我的第二个答案是首先清理HTML（
没有rel
或rev
属性！将这些属性移动到锚






我只是想澄清一下，你想在页面首次加载时显示第一个（访问者）子菜单，对吗？@Thomas Li:对，我需要先显示访问者子菜单，很抱歉没有完全清楚。我在…上方悬停时甚至看不到子菜单？
<!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" xml:lang="en" lang="en">
<head>
    <title>Customizing a CSS and JS driven navigation menu</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <style type="text/css">
        #maintab {
            position:relative;
            top:0px;
            left:0px;
            height:50px;
            margin:0px;
            padding:0px;
        }
        #maintab li {
            float:left;
            margin:0px;
            padding:2px;
            padding-bottom:22px;
            list-style:none;
        }
        .submenustyle {
            display:none;
        }
            #visitors {
            display:block;
        }
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
            $("#maintab li a").mouseenter(function() {
                var identifier = $(this).attr("rel");
                $(".submenustyle").css("display","none");
                $("#"+identifier).css("display","block");

            }).mouseleave(function() {
                var identifier = $(this).attr("rel");
                $(".submenustyle").css("display","");
            });
        });
    </script>
</head>
<body>
    <div id="nav">
        <ul class="basictab" id="maintab">
            <li><a href="#" rel="visitors" rev="maintab">Visitors</a></li>
            <li><a href="#" rel="planners" rev="maintab">Meeting Planners</a></li>
            <li><a href="#" rel="media" rev="maintab">Media</a></li>
            <li><a href="#" rel="members" rev="maintab">Members</a></li>
            <li><a href="about.php" rel="about" rev="maintab">About Us</a></li>
            <li><a href="deals.php" rel="deals" rev="maintab">Deals</a></li>
        </ul>

        <div class="submenustyle" id="planners">
            <a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
            <a href="request_planner.php">Request Meeting Planners Guide</a> <a href=
            "request_proposal.php">Request for Proposal</a>
        </div>

        <div class="submenustyle" id="visitors">
            <a href="calendar_events.php">Calendar Events</a> <a href="stay.php">Lodging</a>
            <a href="eat.php">Dining</a> <a href="arts.php">Arts/Heritage/Culture</a> <a href=
            "attractions.php">Attractions</a> <a href="outdoor_rec.php">Outdoor Recreation</a>
            <a href="shopping.php">Shopping</a> <a href="transportation.php">Transportation</a>
            <a href="resources.php">Resources</a> <a href="request_travel_planner.php">Request
            Travel Planner</a> <a href="map.php">Vicinity Map</a>
        </div>

        <div class="submenustyle" id="media">
            <a href="media_form.php">Request For Media Form</a> <a href="#"></a>
        </div>

        <div class="submenustyle" id="members">
            <a href="../events_news.php">News/Events</a> <a target="_blank" href=
            "MembershipBenefits.pdf">Member Benefits Brochure</a> <a href="members.php">Become
            a Member</a> <a href="members_directory.php">Business Directory</a> <a href=
            "staff.php">Contact Staff</a>
        </div>

        <div class="submenustyle" id="about">
            <a href="about.php">About VCB</a> <a href="contacts.php">VCB Address and Phone
            Numbers</a> <a href="map.php">Vicinity Map</a> <a href="careers.php">Careers</a>
        </div>

        <div class="submenustyle" id="deals">
            <a href="deal_event.php">Capitol Experience</a> <a href="deal_hotel.php">Hotel
            Packages</a> <a href="deal_more.php">More Deals</a>
        </div>
    </div>
</body>
</html>