在现代网站设计中，导航菜单是网站上最重要的功能之一。为了提供更好的用户体验，HTML5提供了许多新特性和API，使得导航菜单可以更加易于开发和使用，并且完美适配移动设备。

HTML5导航菜单在移动设备上更加友好，因为它可以自适应不同的屏幕尺寸和方向。为了实现这个目标，我们需要使用一些特定的技术。

以下代码演示了一个简单的HTML5导航菜单，它可以适配移动设备：

@media screen and (max-width: 480px) {
#menu {
display: none;
}
#menu-toggle {
display: block;
text-align: center;
}
#menu-toggle .dashicons {
font-size: 32px;
margin-top: 10px;
}
}
#menu-toggle:focus + #menu {
display: block;
}
#menu li {
display: inline-block;
margin-right: 10px;
}
#menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
font-size: 20px;
}
#menu a:hover {
background-color: #f2f2f2;
}
#menu-toggle {
display: none;
}
.dashicons {
font-family: 'dashicons';
font-size: 20px;
color: #333;
cursor: pointer;
}

在这个代码中，我们首先定义了导航菜单的HTML结构，然后使用CSS媒体查询定义了不同屏幕尺寸下的样式。当屏幕宽度小于或等于480像素时，我们隐藏了原始导航菜单，并显示了一个"menu-toggle"元素，当它被单击时，会显示导航菜单。

这种方法不仅可以在移动设备上提供更好的用户体验，同时也可以改善网站的可访问性，因为它可以在不同的设备和屏幕上提供一致的导航。