开发者

How this jQuery menu works?

i am going to site http://www.1stwebdesigner.com/ and found that they have a menu on the top header who have li like freebies and inspiration.

i puzzle a lot but not found where is the code for the menu. how i can see the code written for that.

i am trying with firebug. can anyone tell me where the code located for that.

Update

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title> - testing</title>
    <link href="/Content/topmenu.css" rel="stylesheet" type="text/css" />
    <link href="/themes/codebix/Content/Style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/Content/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="/Content/blueprint/print.css" type="text/css" media="print">
    <!--[if IE]><link rel="stylesheet" href="/Content/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>

<body>
    <div id="main">

        <div class="topmenu">
            <ul id="mainMenu">

                <li class="cat-item cat-item-3"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/">Coding</a>
                    <ul class="children boxshadow" style="display: none;">
                        <li class="cat-item cat-item-1026"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/cheat_sheets/">Cheat
                            Sheets</a> </li>
                        <li class="cat-item cat-item-1024"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/html_css/">HTML
                            &amp; CSS</a> </li>
                        <li class="cat-item cat-item-1027"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/js_ajax/">JS
                            &amp; AJAX</a> </li>

                        <li class="cat-item cat-item-1028"><开发者_如何学JAVAspan>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/php-css/">PHP</a>
                        </li>
                        <li class="cat-item cat-item-1025"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/css/tutorials-css/">Tutorials</a>
                        </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-6"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/">Freebies</a>

                    <ul class="children boxshadow" style="display: none;">
                        <li class="cat-item cat-item-1007"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/brushes-freebies/">Brushes</a>
                        </li>
                        <li class="cat-item cat-item-1013"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/fonts-freebies/">Fonts</a>
                        </li>
                        <li class="cat-item cat-item-1008"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/icons-freebies/">Icons</a>
                        </li>

                        <li class="cat-item cat-item-1009"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/patterns-freebies/">Patterns</a>
                        </li>
                        <li class="cat-item cat-item-1014"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/templates-freebies/">Templates</a>
                        </li>
                        <li class="cat-item cat-item-1011"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/textures-freebies/">Textures</a>
                        </li>
                        <li class="cat-item cat-item-1012"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/vectors/">Vectors</a>

                        </li>
                        <li class="cat-item cat-item-1010"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/freebies/wallpapers-freebies/">Wallpapers</a>
                        </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-7"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/">Inspiration</a>
                    <ul class="children boxshadow" style="display: none;">
                        <li class="cat-item cat-item-1015"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/illustration-inspiration/">Illustration</a>

                        </li>
                        <li class="cat-item cat-item-1016"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/logos-inspiration/">Logos</a>
                        </li>
                        <li class="cat-item cat-item-1017"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/photography-inspiration/">Photography</a>
                        </li>
                        <li class="cat-item cat-item-1018"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/typography-inspiration/">Typography</a>
                        </li>

                        <li class="cat-item cat-item-1019"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/inspiration/interfaces/">Web
                            Interfaces</a> </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-4"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/">Tutorials</a>
                    <ul class="children boxshadow" style="display: none;">
                        <li class="cat-item cat-item-1034"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/3d_effects/">3D
                            Effects</a> </li>

                        <li class="cat-item cat-item-1035"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/coding-tutorials/">Coding</a>
                        </li>
                        <li class="cat-item cat-item-1029"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/icons-tutorials/">Icons</a>
                        </li>
                        <li class="cat-item cat-item-1031"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/photo_effects/">Photo
                            Effects</a> </li>
                        <li class="cat-item cat-item-1032"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/quick_tips/">Quick
                            Tips</a> </li>

                        <li class="cat-item cat-item-1033"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/text_effects/">Text
                            Effects</a> </li>
                        <li class="cat-item cat-item-1030"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/tutorials/web_interface/">Web
                            Interface</a> </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-10"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/">Web
                    Design</a>
                    <ul class="children boxshadow" style="display: none;">

                        <li class="cat-item cat-item-1039"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/1wd-design/">1WD
                            Features</a> </li>
                        <li class="cat-item cat-item-1091"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/blogging-design/">Blogging</a>
                        </li>
                        <li class="cat-item cat-item-1042"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/freelance-design/">Freelance</a>
                        </li>
                        <li class="cat-item cat-item-1041"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/interviews/">Interviews</a>

                        </li>
                        <li class="cat-item cat-item-1040"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/news-design/">News</a>
                        </li>
                        <li class="cat-item cat-item-1043"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/social_media/">Social
                            Media</a> </li>
                        <li class="cat-item cat-item-1036"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/tips-design/">Tips</a>
                        </li>
                        <li class="cat-item cat-item-1037"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/tools-design/">Tools</a>

                        </li>
                        <li class="cat-item cat-item-1038"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/design/usability-design/">Usability</a>
                        </li>
                    </ul>
                </li>
                <li class="cat-item cat-item-5"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/wordpress/">WordPress</a>
                    <ul class="children boxshadow" style="display: none;">
                        <li class="cat-item cat-item-1023"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/wordpress/howto-wordpress/">HowTos</a>

                        </li>
                        <li class="cat-item cat-item-1022"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/wordpress/plugins-wordpress/">Plugins</a>
                        </li>
                        <li class="cat-item cat-item-1021"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/wordpress/showcase-wordpress/">Showcase</a>
                        </li>
                        <li class="cat-item cat-item-1020"><span>&nbsp;</span><a href="http://www.1stwebdesigner.com/category/wordpress/themes-wordpress/">Themes</a>
                        </li>

                    </ul>
                </li>
                <li class="premium"><a title="Go to Premium-Members page" href="http://www.1stwebdesigner.com/premium/">
                    <span class="icon_menu_7">&nbsp;</span>Premium</a></li>
            </ul>
        </div>



    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/ecmascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script src="/Scripts/script.js" type="text/javascript"></script>

</body>
</html>


Stealing is bad thing!

But as we all know, internet is ment to be open-source, so, here it is: http://jsfiddle.net/vcVHg/

You can get all of this, just searching through JavaScript & CSS.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜