목차
     Menu和Nav的对比
웹 프론트엔드 HTML 튜토리얼 利用HTML 5中的Menu和Menuitem元素快速创建菜单_html/css_WEB-ITnose

利用HTML 5中的Menu和Menuitem元素快速创建菜单_html/css_WEB-ITnose

Jun 24, 2016 am 11:53 AM

译文:HTML 5中Menu和Menuitem的元素介绍

译者:dwqs

今天向你介绍HTML 5中的两个元素:Menu和Menuitem,这两个元素是W3C交互元素中的一部分。现在Web的演变已经不仅仅局限于文档之间的链接,在APPs中,页面的行为越来越多,因此,是时候形成一个Web交互的标准了。

Menu和Menuitem是在开发者中谈论最热门的两个元素,可能是由于主流浏览器对其缺乏足够的支持。在我写这篇文章的时候,FireFox已经实现了这个元素。

当谈到Menu时,难免不和Nav元素混淆。区分这两个元素,文档规范是一个不错的工具。

Nav元素是HTML导航元素,代表着Web页面的导航块,一般包含一个links集合,允许用户在页面内跳转或者跳转到其它网站页面。

Menu是一系列菜单命令的集合,跟桌面或者手机应用有点相似。桌面应用通常使用工具条菜单或者上下文菜单来展现各种任务。Nav和Menu最根本的不同之处在于:Nav元素包含导航链接去帮助用户在Web页面之间跳转,而Menu应该让用户执行特定的任务。

使用Menu元素

在 一个容器中,Menu元素用于创建上下文、工具栏和弹出菜单。然而,后面的两个功能还没有浏览器实现,包括FireFox。此刻,很难去猜测浏览会怎么实 现他们以及看起来会是什么样子。不过对于toolbar和popup菜单的规范在下一代交互设计中做些改变也是一个不错的机会。

对于现在,我们将集中注意力到上下文。

上下文

当我们右击一个应用时,会出现一个上下文菜单。显示的选项取决于用户在哪里点击。

JavaScript 选项

通过JavaScript和JQuery插件在Web页面上添加上下文菜单是可以实现的。问题是这种方法需要额外的标记,并且脚本会删除浏览器本地的菜单,如果处理不当,将会使用户感到失望。

本地解决方案

Menu和Menuitem一起使用,将把新的菜单合并到本地的上下文菜单。例如,给body添加一个叫“Hello World”的菜单

<body contextmenu="new-context-menu"><menu id="new-context-menu" type="context">    <menuitem>Hello World</menuitem></menu></body>
로그인 후 복사

在上述代码片段中,包含的基本属性有id,type和contextmenu?它指定了菜单类型是context,同时也指定了新的菜单项应该被显示的区域。

在示例中,当右击鼠标时,新的菜单项将出现在文档的任何地方,因为我们指定它的作用区域是body。

当然,你可以通过在特定的元素上给contextmenu赋值,例如div,main,section等等,来限制新菜单项的作用区域。

<body>    <div contextmenu="new-context-menu">    <!-- content -->    </div>    <menu id="new-context-menu" type="context">        <menuitem>Hello World</menuitem>    </menu></body>
로그인 후 복사

当在FireFox中查看时,会发现新添加的菜单项被添加到最顶部。

添加子菜单和图标

子菜单由一组相似或相互的菜单项组成。PS中的Image Rotation就是一个典型的例子。使用Menu添加子菜单是非常容易和直观的。查看下面的示例代码:

<menu id="demo-image" type="context">    <menu label="Image Rotation">        <menuitem>Rotate 90</menuitem>        <menuitem>Rotate 180</menuitem>        <menuitem>Flip Horizontally</menuitem>        <menuitem>Flip Vertically</menuitem>    </menu></menu>
로그인 후 복사

在支持Menu元素的浏览器中运行时,将看到新菜单中添加的四个子菜单:

图标

介绍一个新的属性:icon,使用这个属性可以在菜单的旁边添加图标。值得一提的是,icon属性只能在menuitem元素中使用。示例代码:

<menu id="demo-image" type="context">    <menu label="Image Rotation">        <menuitem icon="img/arrow-return-090.png">Rotate 90</menuitem>        <menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>        <menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>        <menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>    </menu></menu>
로그인 후 복사

结果如你所见的:

在菜单中添加功能

我们已经构建了一些看起来像菜单的示例,但是是没有任何功能都的。当点击菜单时,用户期待一些事情发生。例如点击Copy应该要复制文本或链接,点击New Folder应该创建一个新的文件夹。可以用JavaScript实现这些功能。

注意:在开始之前,我建议你在 JavaScript Fundamentals 看一看Jeremy McPeak’s的课程,对于任何想学习JavaScript的人都是一个不错的开始。

利用上面的“Image Rotation”为例,让我们添加一个当点击时旋转图像的功能。CSS 3的Transform and Transition可以在浏览器中为我们实现这个功能。将图像旋转90度的样式如下:

.rotate-90 {    transform: rotate(90deg);}
로그인 후 복사

为了使用这个样式,需要写一个函数将它应用到图像。

function imageRotation(name) {    document.getElementById('image').className = name;}
로그인 후 복사

把这个函数和每一个menuitem的onclick属性关联,并且传递一个参数:rotate-90

<menu id="demo-image" type="context">    <menu label="Image Rotation">        <menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">Rotate 90</menuitem>        <menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>        <menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>        <menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>    </menu></menu>
로그인 후 복사

 

完成这个之后,再创建将图片旋转180度和裁剪图片的样式,将每一个函数添加到独立的menuitem中,记得传参数 。查看效果:in the demo page.

查看更多关于Menu元素的信息:Interactive Element: The Menu Element

查看我的示例:http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/

 

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? Mar 18, 2025 pm 02:51 PM

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

See all articles