将 jQuery UI 主题添加到Superfish菜单和Superfish菜单

分享于 

10分钟阅读

Web开发

  繁體

介绍

使用 Superfish suckerfish插件,采用现有的纯CSS下拉菜单,使它的在不使用JavaScript的情况下优雅地降低了 degrades。 如果你需要的是纯 CSS,什么时候你需要一个好的菜单,你可以使用的Superfish。 在这里,你可以找到一篇关于如何使用菜单 ( jQuery插件)的文章。

所以 Superfish。 让我们向它添加 jQuery UI 主题来使它变得更好。 在这里,你可以找到完整的文件,关于如何使用的jQuery UI。

获取 jQuery UI 主题

首先,让我们从这里下载一个收费为的jQuery UI 主题

选择了主题并下载之后,你应该有一个像这样的" jquery-ui-1.10.1.custom.zip"文件。 取出它,你就可以找到下面的文件夹:

  • CSS
    • 自定义主题( 你选择的主题名称)
      • images
      • jquery-ui-1.10.1.custom.css
      • jquery-ui-1.10.1.custom.min.css
  • 开发包( 我们没有与之相关的内容)
  • js
    • jquery-1.9.1.js
    • jquery-ui-1.10.1.custom.js
    • jquery-ui-1.10.1.custom.min.js
  • index.html

将 jQuery UI 添加到 Superfish

现在,下载 ( 这里有一个用于Superfish的zip归档: superfish-master.zip ) superfish 插件及其示例。 解压缩压缩文件时,你将找到包含以下内容的文件夹" <code>superfish-maste R":

  • CSS
    • superfish.css
    • superfish-navbar.css
    • superfish-vertical.css
  • 图像
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.0.min.js
    • superfish.js
    • supersubs.js
  • example.html

你应该从文件夹 js 中删除" jquery-1.9.0.min.js",并从主题文件夹中添加" jquery-1.9.1.min.js"和" jquery-ui-1.10.1.custom.min.js",而不是。 还将" images"和" jquery-ui-1.10.1.custom.min.css"的css 文件夹从文件夹添加到superfish的css 文件夹。 你的superfish 文件夹应该如下所示:

  • CSS
    • images
    • jquery-ui-1.10.1.custom.min.css
    • superfish.css
    • superfish-navbar.css
    • superfish-vertical.css
  • 图像
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.1.min.js
    • jquery-ui-1.10.1.custom.min.js
    • superfish.js
    • supersubs.js
  • example.html

现在我们有了所有需要的东西。
打开" superfish.css"进行编辑和搜索" /*** DEMO SKIN ***/ 在我们需要的时候,我们不需要任何 CSS,所以我们可以将任何颜色或者 background 或者边框设置为的superfish,所以我们将所有的东西替换为:

/*** DEMO SKIN ***/.sf-menu {
 float: left;
 margin-bottom: 1em;
}
.sf-menu a {
 border: none;
 padding:. 75em 1em;
 text-decoration:none;
} 

现在打开" example.html"进行编辑。 我们必须添加" jquery-ui-1.10.1.custom.min.css"样式表和" js/jquery-1.9.1.min.js"," js/jquery-ui-1.10.1.custom.min.js"javascript到" example.html",所以添加以下标签:

<linkrel="stylesheet"type="text/css"href="css/jquery-ui-1.10.1.custom.min.css"media="screen"><scripttype="text/javascript"src="js/jquery-1.9.1.min.js"></script><scripttype="text/javascript"src="js/jquery-ui-1.10.1.custom.min.js"></script>
然后删除这里( 我们已经删除了" jquery-1.9.0.min.js"
<scripttype="text/javascript"src="js/jquery-1.9.0.min.js"></script>
同样:
  • 我们需要将" ui-state-default"类添加到" ul.sf-menu li""
    $("ul.sf-menu li").addClass("ui-state-default");
    ( 你可以在 addClass 找到" addClass",并在中找到" sf-menu"。 )
  • 当鼠标指针进入" ul.sf-menu li"时,需要向" ul.sf-menu li"添加" ui-state-hover"类,并在鼠标指针离开" ul.sf-menu li"时移除" ui-state-hover"类。
    $("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); },
     function () { $(this).removeClass('ui-state-hover'); });
    ( 你可以在 hover 找到" hover")
因此你的脚本应该类似于以下内容:
<scripttype="text/javascript"> 
 // initialise plugins jQuery(function(){
 jQuery('#example').superfish({
 //useClick: true });
 $("ul.sf-menu li").addClass("ui-state-default");
 $("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); },
 function () { $(this).removeClass('ui-state-hover'); });
 });</script>

好了,工作结束了。 现在使用浏览器打开" example.html"并查看结果。 你的菜单应该类似于以下内容:

向 Superfish RTL添加 jQuery UI

要制作 Superfish菜单,你需要执行更多步骤。 下载下载 RTL ( 这里提供了一个用于 Superfish RTL的zip存档: 当你解压缩压缩文件时,你将找到包含以下内容的文件夹:

  • CSS
    • superfish.css
    • superfish-navbar.css
    • superfish-navbar-rtl.css
    • superfish-rtl.css
    • superfish-vertical.css
    • superfish-vertical-rtl.css
  • 图像
    • arrows-ffffff.png
    • arrows-ffffff-rtl.png
    • shadow.png
  • js
  • index.html

我们需要复制" superfish-navbar-rtl.css"," superfish-rtl.css"和" superfish-vertical-rtl.css"到css文件夹,还需要打开" superfish-rtl.css"来编辑和替换" /*** DEMO SKIN ***/ "部分:

/*** DEMO SKIN ***/.sf-menu {float:right;} 

按照 Superfish,我们需要将下面的代码添加到" superfish-rtl.css"中,以便正确地显示中的RTL菜单:

.sf-menu{ width:100%;}
.sf-menu.sf-vertical {width:10em;}
.sf-menu li a {position:static;}

同时将 arrows-ffffff-rtl.png 复制到 images 文件夹。

你的菜单的superfish文件夹应该是类似这样的:

  • CSS
    • 图像
    • jquery-ui-1.10.1.custom.min.css
    • superfish.css
    • superfish-navbar.css
    • superfish-navbar-rtl.css
    • superfish-rtl.css
    • superfish-vertical.css
    • superfish-vertical-rtl.css
  • 图像
    • arrows-ffffff.png
    • arrows-ffffff-rtl.png
    • shadow.png
  • js
    • hoverIntent.js
    • jquery.bgiframe.min.js
    • jquery-1.9.1.min.js
    • jquery-ui-1.10.1.custom.min.js
    • superfish.js
    • supersubs.js
  • example.html

现在打开" example.html"进行编辑。 我们必须添加" superfish-rtl.css",所以添加这个标记:

<linkrel="stylesheet"type="text/css"href="css/superfish-rtl.css"media="screen"/>

可以添加" superfish-vertical-rtl.css"或者" superfish-navbar-rtl.css" 样式表,如果你需要垂直或者导航栏菜单:

<linkrel="stylesheet"type="text/css"href="css/superfish-vertical-rtl.css"media="screen"/><linkrel="stylesheet"type="text/css"href="css/superfish-navbar-rtl.css"media="screen"/>

也找到 <ul class="sf-menu" id="example"> 然后把它放到 <div style="direction: rtl;"> 或者像这样。

好了,工作又来了。 现在使用浏览器打开" example.html"并查看结果。 你的菜单应该类似于以下内容:

历史记录

引用


添加  SUP  theme  菜单  Super  Jquery Ui  
相关文章