jquery创建css_创建一个简单而时尚CSS Jquery菜单

最新推荐文章于 2021-08-03 21:45:05 发布

cuketao5066

最新推荐文章于 2021-08-03 21:45:05 发布

阅读量196

点赞数

文章标签： jquery python html bootstrap css ViewUI

原文链接：https://www.script-tutorials.com/css-menus-jquery/

版权

jquery创建css

Nowadays, css menus are becoming more and more popular, which is not surprising. Small size, fast speed, ease to create. In today’s tutorial I will tell you how to create a stylish navigation menu using not only CSS, but also jQuery library. It can help us enhance the default behavior. If you are ready – we can start.

如今，css菜单变得越来越流行，这不足为奇。体积小，速度快，易于创建。在今天的教程中，我将告诉您如何使用CSS和jQuery库创建时尚的导航菜单。它可以帮助我们增强默认行为。如果您准备好–我们可以开始。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code.

这是我们的主页代码。

index.html (index.html)

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="examples">
    <div id="menu">
        <ul class="level1">
            <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Email</a></li>
                    <li><a href="#url">Telephone</a></li>
                    <li><a href="#url">Online Form</a></li>
                    <li><a href="#url">Snail Mail Address</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Ski Hire Facilities</a></li>
                    <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Beginners Slopes</a></li>
                            <li><a href="#url">Intermediate Slopes</a></li>
                            <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="level4">
                                    <li><a href="#url">Local</a></li>
                                    <li><a href="#url">Nearby</a></li>
                                    <li><a href="#url">With instructor</a></li>
                                    <li><a href="#url">Snow boarding</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Expert</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Night Life</a></li>
                    <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Snow Hotel</a></li>
                            <li><a href="#url">The Snowman</a></li>
                            <li><a href="#url">Ice Cavern</a></li>
                            <li><a href="#url">Ski Inn</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">From Airport</a></li>
                            <li><a href="#url">In Resort</a></li>
                            <li><a href="#url">Multiple Resorts</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Where to go</a></li>
                    <li><a href="#url">What to do</a></li>
                    <li><a href="#url">Places of interest</a></li>
                    <li><a href="#url">National parks & Museums</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Money Exchange</a></li>
                    <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Lift Passes</a></li>
                            <li><a href="#url">Insurance</a></li>
                            <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="level4">
                                    <li><a href="#url">Boots</a></li>
                                    <li><a href="#url">Skis</a></li>
                                    <li><a href="#url">Ski Wear</a></li>
                                    <li><a href="#url">Goggles</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Ski Schools</a></li>
                            <li><a href="#url">Snow Report</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Austrian</a></li>
                            <li><a href="#url">German</a></li>
                            <li><a href="#url">French</a></li>
                            <li><a href="#url">English</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Short Breaks</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
        </ul>
    </div>
    <div style="clear:both"></div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="examples">
    <div id="menu">
        <ul class="level1">
            <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Email</a></li>
                    <li><a href="#url">Telephone</a></li>
                    <li><a href="#url">Online Form</a></li>
                    <li><a href="#url">Snail Mail Address</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Ski Hire Facilities</a></li>
                    <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Beginners Slopes</a></li>
                            <li><a href="#url">Intermediate Slopes</a></li>
                            <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="level4">
                                    <li><a href="#url">Local</a></li>
                                    <li><a href="#url">Nearby</a></li>
                                    <li><a href="#url">With instructor</a></li>
                                    <li><a href="#url">Snow boarding</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Expert</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Night Life</a></li>
                    <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Snow Hotel</a></li>
                            <li><a href="#url">The Snowman</a></li>
                            <li><a href="#url">Ice Cavern</a></li>
                            <li><a href="#url">Ski Inn</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">From Airport</a></li>
                            <li><a href="#url">In Resort</a></li>
                            <li><a href="#url">Multiple Resorts</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Where to go</a></li>
                    <li><a href="#url">What to do</a></li>
                    <li><a href="#url">Places of interest</a></li>
                    <li><a href="#url">National parks & Museums</a><b></b></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="level2">
                    <li><a href="#url">Money Exchange</a></li>
                    <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Lift Passes</a></li>
                            <li><a href="#url">Insurance</a></li>
                            <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="level4">
                                    <li><a href="#url">Boots</a></li>
                                    <li><a href="#url">Skis</a></li>
                                    <li><a href="#url">Ski Wear</a></li>
                                    <li><a href="#url">Goggles</a><b></b></li>
                                </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#url">Ski Schools</a></li>
                            <li><a href="#url">Snow Report</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="level3">
                            <li><a href="#url">Austrian</a></li>
                            <li><a href="#url">German</a></li>
                            <li><a href="#url">French</a></li>
                            <li><a href="#url">English</a><b></b></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#url">Short Breaks</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
        </ul>
    </div>
    <div style="clear:both"></div>
</div>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

模板/css/main.css (templates/css/main.css)

Quite all css code is belong to css menu. I don`t including this into article. It always available in download package

所有CSS代码都属于CSS菜单。我没有将此纳入文章。它总是在下载包中可用

步骤3. JS (Step 3. JS)

Here are necessary JS file to our project.

这是我们项目所需的JS文件。

js / main.js (js/main.js)

$(document).ready(function(){
    $('#menu li').hover(function(){
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
            // $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); // effect 2
        },function(){
            $(this).find('ul:first').css({visibility: "hidden"});
        });
});

$(document).ready(function(){
    $('#menu li').hover(function(){
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
            // $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); // effect 2
        },function(){
            $(this).find('ul:first').css({visibility: "hidden"});
        });
});

You can play with effects – try to use fadeIn and slideDown. Both looks fine.

您可以玩效果–尝试使用fadeIn和slideDown。两者看起来都很好。

js / jquery.min.js (js/jquery.min.js)

This is just jQuery library. No need to give full code of that file here. It always available in download package

这只是jQuery库。无需在此处提供该文件的完整代码。它总是在下载包中可用

步骤4.图片 (Step 4. Images)

Also we need several images for our demo (these images for menu):

另外，我们需要几个图像进行演示(这些图像用于菜单)：

现场演示

结论 (Conclusion)

Today I have told you how you can make any css menus more attractive and user friendly. You can use this material as is in your startups. Good

今天，我告诉您如何使任何CSS菜单更具吸引力和用户友好性。您可以像在初创企业中一样使用这种材料。好

翻译自: https://www.script-tutorials.com/css-menus-jquery/

jquery创建css

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery创建css_创建一个简单而时尚CSS Jquery菜单

jquery创建cssNowadays, css menus are becoming more and more popular, which is not surprising. Small size, fast speed, ease to create. In today’s tutorial I will tell you how to create a stylish navigati...
复制链接

扫一扫