Question

我正在使用仅CSS菜单构建AMP HTML移动模板。它必须是CSS，因为AMP HTML标准不允许任何JavaScript。我相信这将有助于其他人建立一个带有漂亮菜单的AMP HTML页面。

我有一个非常基本的版本编码。但由于某些原因，当我清除代码为AMP时，菜单没有出现。我知道这可能非常简单，但它完全躲避了我。我把我的页面的缩短版本放在下面，任何帮助都将不胜感激。

为了快速参考，以下代码将从AMP HTML调试器抛出的唯一错误是我有多个样式标签，我知道就是这种情况，我只是将它们用于组织目的，然后在我的组合中使用它们一次平台。

感谢您的帮助！

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="canonical" href="">
<!-- AMP Requirements Begin -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP Requirements End -->
<!-- Main Style Begin -->
<style>
body {
	margin: 0px;	
}
#main-container {
	border: 1px solid #3f3f3f;
	width: 100%;
}
#header-wrapper {
	border: 1px solid #3f3f3f;
	width: 100%;
}
#header-wrapper span {
	float: right;
	display: inline-block;
}
#header-wrapper span a {
	display: block;
}
/* Nav Bar Begin */
#navbar-container ul {
	list-style-type:none;
	margin: 0px;
	padding: 0px;
}
#navbar-container ul li {
	margin: 0px;
	padding: 0px;
	display: inline;
}
/* Nav Bar End */
</style>
<!-- Main Style End -->
<!-- Menu CSS Begin -->
<style>
#main-navigation {
  
  /* Collapsed */
  width: 0; 

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background: #12E444;
  &:after {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 34px;  
  }
}

#main-container {
  float: right;
}
#main-navigation:target + #main-container {
	width: 80%;
	#main-container {
		width: 80%;
		left: 20%;	
	}
	#header-wrapper {
		width: 80%;
		left: 20%;
}
</style>
<!-- Menu CSS End -->
</head>
<body>
<!-- Mobile Nav Chunk Begin -->
<nav id="main-navigation">
	<ul>
    	<li><a href="#">Close Menu</a></li>
    	<li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
        <li><a href="#">Menu item Long Maybe Long</a></li>
    </ul>
</nav>
<!-- Mobile Nav Chunk End -->
<!-- Main Wrapper Begin -->
<div id="main-container">
  <!-- Header Wrapper Begin -->
  <div id="header-wrapper">
  	<span>Call US <a href="tel:303-999-9999">303-999-9999</a></span>
  	<amp-img src="test-images/mobile-logo.jpg" width="142" height="51" alt=""></amp-img>
  </div>
  <!-- Header Wrapper End -->
  <!-- Nav Bar Begin -->
  <div id="navbar-container">
  	<ul>
    	<li><a href="#main-navigation">Menu</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
  </div>
  <!-- Nav Bar End -->
  <!-- Main Content Area Begin -->
  <div id="main-content-area">

    </div>
  <!-- Main Content Area End -->
</div>
<!-- Main Wrapper End -->
</body>
</html>

Answer 1

#main-navigation:target + #main-container {
    width: 80%;
    #main-container {
        width: 80%;
        left: 20%;  
    }
    #header-wrapper {
        width: 80%;
        left: 20%;
    }                      /* <- MISSING THIS RIGHT CURLY BRACE */
}
</style>

AMP网站的CSS only菜单

1 个答案: