CSS3 Responsive menu Today I’m going to tell how to create a responsive navigation menu using only CSS3. Why responsive? I think it is important and essential. As you know, today, many people browse the Internet via mobile devices (such as ipad, iphone or android). And it is important that mobile members could navigate through your website. Some solutions which you can find in internet offer you to use jquery or javascript to achieve a necessary behavior. But today I will give you a solution without the use of javascript.
CSS3响应式菜单今天，我将告诉您如何仅使用CSS3创建响应式导航菜单。 为什么要回应？ 我认为这是重要和必不可少的。 如您所知，今天，许多人通过移动设备(例如ipad，iphone或android)浏览Internet。 移动成员可以浏览您的网站非常重要。 您可以在Internet上找到一些解决方案，这些解决方案可让您使用jquery或javascript实现必要的行为。 但是今天，我将为您提供不使用javascript的解决方案。
By default, this is usual UL-LI drop-down menu. But, if our screen is small (in case of mobile browsers), this menu turns into a click-based menu. In this case your visitors will be able to click to top elements of menu to open submenus. Please look how it works:
默认情况下，这是通常的UL-LI下拉菜单。 但是，如果我们的屏幕很小(在移动浏览器的情况下)，则此菜单会变成基于点击的菜单。 在这种情况下，您的访问者将能够单击菜单的顶部元素以打开子菜单。 请查看其工作方式：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
步骤1. HTML (Step 1. HTML)
Here is the markup for the demo page with our responsive menu:
这是带有响应菜单的演示页面的标记：
index.html (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Responsive menu | Script Tutorials</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#s1">Menu 1</a>
<span id="s1"></span>
<ul class="subs">
最低0.47元/天 解锁文章
3285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
