View Demo
|
Download
1.
Download Source Files
Download the
CSS dock menu zip package
.
http://www.wizzud.com/component/option,com_remository/Itemid,27/func,selectcat/cat,3/
2.
Insert Code
In between the HTML <head> tag, add the following code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack for IE 6.
3.
Configuration
Don’t forget to add the following code to anywhere within the <body> tag:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
4.
Add or Remove Items
To add menu item to the top dock (note: span tag is after the img tag):
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
To add menu item to the bottom dock (note: span tag is before the img tag):
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
Browser Compatibility
I have tested on IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 (although there are some minor rendering issues with Safari).
分享到：
相关推荐
【标题】"仿苹果MAC机桌面导航菜单：Css Dock Menu"是关于网页设计的一个主题，主要探讨如何使用CSS和JavaScript来创建类似苹果Mac操作系统中桌面导航菜单的效果。这个菜单的特点在于其动态效果和用户交互性，能带给...
《CSS Dock Menu：构建响应式导航菜单的技巧与实践》 在网页设计中，导航菜单是用户与网站交互的关键元素，而CSS Dock Menu则是一种创新的、可自定义的导航解决方案，尤其适用于需要响应式布局的网站。CSS Dock ...
【CSS Dock Menu】是一种网页设计技术，用于创建类似于Apple OS（苹果操作系统）的桌面效果的导航菜单。这个技术结合了CSS（层叠样式表）和JavaScript，为用户提供了一个美观且功能丰富的交互式菜单。在网页设计中，...
【CSS-DOCK-menu】是一种基于CSS、JavaScript（特别是jQuery库）实现的仿苹果Dock菜单设计。这种菜单设计灵感来源于苹果操作系统中的Dock栏，它是一个动态的、可自定义的工具栏，通常位于屏幕底部，用于快速访问常用...
在这个名为"css-dock-menu.rar_dock menu_主界面css"的压缩包中，我们关注的重点是创建一个类似苹果Mac操作系统的Dock菜单的Web实现。这个项目主要由以下几个文件组成： 1. **style.css**：这是整个项目的样式表...
这个名为"css-dock-menu.rar"的压缩包，包含了三款不同的jQuery Dock菜单，为网页设计师提供了丰富的选择。 首先，让我们理解一下“Dock菜单”的概念。Dock菜单源自苹果的操作系统，它通常位于屏幕的底部或侧面，...
标题中的“css-dock-menu.rar”是一个压缩包文件，它包含了一个实现苹果操作系统风格的CSS动画菜单的网页源代码。这种菜单设计模仿了苹果电脑系统中的Dock栏，它是一个固定在屏幕底部或顶部的快捷方式区域，能以平滑...
在提供的文件"jquery-dock-menu-2"中，我们可以找到实现这一功能的具体代码和资源，包括HTML、CSS和JavaScript文件。通过对这些文件的学习和分析，可以深入理解jQuery如何与HTML和CSS结合，实现这种交互效果。通过...
1. **HTML结构**：HTML文件中，浮动菜单的元素一般会包裹在一个容器内，如`<div id="dockMenu">`，包含各个菜单项，每个菜单项可以是`<li>`元素，如`<li><a href="#">菜单项1</a></li>`。菜单项可以链接到其他页面...
`Dockmenu.swf`是核心的Flash组件，它实现了菜单的交互逻辑和视觉效果。ActionScript 3是Flash中的编程语言，允许开发者编写动态行为和复杂算法，使得菜单可以响应用户的鼠标点击和悬停事件。 `README.TXT`通常包含...
【描述】"JS写的DOCKMENU，可以随着滚动条上下移动，且永远在浏览器的最右侧" 揭示了几个关键的技术点： 1. **JavaScript**：这个Dock菜单是用JavaScript编写的，JavaScript是一种广泛使用的客户端脚本语言，可以在...
HTML5 CSS3 仿安卓手机DockMenu动态导航菜单，鼠标放上后，菜单会向上轻微滑动，默认状态下，打开网页后，菜单隐藏在小箭头中，在电脑上用鼠标单击小箭头即可向上滑出整体的菜单，在手机上是轻触箭头即可滑出菜单，...
- `css-dock-menu.zip`：CSS Dock Menu可能是一个使用Ajax的浮动菜单系统，实现动态加载和交互。 4. **标签解析** - "ajax 实例"：表明这是关于Ajax技术的具体应用案例。 - "控件"：可能指的是这些实例中包含的...
在这个项目中，`css-dock-menu`可能是一个纯CSS实现的版本，不依赖JavaScript，而是通过CSS3的过渡（transition）、动画（animation）以及定位（positioning）等特性来模仿苹果菜单的行为。这种方法的优势在于性能更...
6. **媒体查询（Media Queries）**：媒体查询让开发者可以根据设备的特性（如屏幕尺寸）应用不同的CSS规则，这在实现响应式DockMenu时必不可少。 通过结合HTML5的新特性与CSS3的强大样式控制，"AndroidDock_...
总结起来，"menu_dock顶部隐藏导航"的设计结合了CSS和JS的优势，通过CSS实现布局和动画效果，通过JS处理用户交互，提供了更高效且直观的导航体验。在实际开发中，开发者需要根据项目需求进行适当的调整和优化，以...
【标题】"dock_menu.zip仿苹果菜单"所代表的知识点主要集中在用户界面设计、操作系统界面模仿以及动态效果的实现上。这个压缩包可能包含了一套模仿苹果操作系统Dock栏菜单的设计资源或代码，使得非苹果系统的用户也...