通过拉下其他网络块打开导航抽屉 [英] navigation drawer opens by pulling down other web blocks
本文介绍了通过拉下其他网络块打开导航抽屉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通过拉下其他网络块打开导航抽屉.当它关闭块出现.另外抽屉菜单占据了我网站顶部空间的更多空间.无法在导航栏附近保留块.那里有一大片空地.但抽屉菜单工作正常.如何解决这个问题?
HTML
<头><meta http-equiv="Content-Type";内容=文本/html；字符集=utf-8"><元名称=视口"内容=宽度=设备宽度，初始比例=1.0"><title>我的网站</title><link rel="样式表";href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><标题><i id="汉堡包";class=fa fa-bars"></i><h2>我的网站</h2></标题><导航><a href=#"><i class=fa fa-user-secret"></i><span>A</span></a><a href=#"><i class=fa fa-check-circle-o"</i><span>B</span></a><a href=#"><i class=fa fa-lightbulb-o"></i><span>C</span></a><a href=#"><i class=fa fa-id-badge"></i><span>D</span></a><a href=#"><i class=fa fa-lightbulb-o"</i><span>E</span></a><a href=#"><i class=fa fa-lightbulb-o"></i><span>F</span></a></nav><p><span style="font-size: 14pt"><p style="text-align: justify"><b>锡吉里亚来自维基百科的免费百科全书</b><br> 位置斯里兰卡中部省坐标 07°57′25″N 80°45′35″E 坐标:07°57′25″N 80°45′35″E海拔 349 米[1]联合国教科文组织世界遗产官方名称:锡吉里耶古城类型文化标准二、三、四1982年指定(第6届)参考编号.202联合国教科文组织亚太地区锡吉里亚在斯里兰卡的位置锡吉里亚在斯里兰卡的位置Sigiriya或Sinhagiri(狮子岩僧伽罗语:සීගිරිය，泰米尔语:சிகிரியா/aசிங்ககிரரர்)位于斯里兰卡北部的大坝镇，位于斯里兰卡北部的大坝镇附近.这个名字指的是一个具有历史和考古意义的遗址，由近 200 米(660 英尺)高的巨大岩石柱主导. [需要引用]根据古老的斯里兰卡编年史库拉瓦姆萨 (Culavamsa) 的记载，此地被国王卡夏帕 (公元 477 – 495 年) 选为他的新首都.他在这块岩石的顶部建造了他的宫殿，并用五颜六色的壁画装饰了它的两侧.在这块岩石半边的一个小高原上，他建造了一个巨大狮子形状的门户.这个地方的名字来源于这个结构——Sīnhāgiri，狮子山(一个词源类似于Sinhapura，新加坡的梵文名称狮城).国王死后，首都和王宫都被废弃了.直到 14 世纪，它才被用作佛教寺院. [2]今天的锡吉里亚已被联合国教科文组织列为世界遗产.它是保存最完好的古代城市规划范例之一. [3]</p></span></p><script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">.</html>CSS
header, nav {背景颜色:#06C；字体系列:'Open Sans';}标题{宽度:100%；显示:弹性；对齐项目:中心；高度:80px；颜色:#FFF；justify-content:flex-start；}/* 我们使用 flex display 将汉堡图标定位在 AndroiCSS h2 元素的一侧 */#汉堡包 {光标:指针；}/* 添加小手光标指针以指示该元素可点击；它在点击时触发 jQuery */标题 * {边距:0 15px；}.fa-bars，标题 h2 {字体大小:28px！重要；}标题 h2 {字体粗细:400！重要；}导航{显示:flex;flex-direction:column;width:0;align-items:center;过渡:宽度 0.2s 缓和；}导航打开{宽度:250px；高度:100%；}导航关闭{宽度:0；}导航 * {颜色:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;}导航{文字装饰:无！重要；边框顶部:2px 纯灰色；宽度:100%；文本对齐:左；显示:flex；对齐项目:中心；对齐内容:中心；高度:55 像素；}导航:悬停{背景色:rgba(0, 0, 0, 0.1);}/* 这会在将鼠标悬停在导航元素上时更改背景颜色 */Javascript
$("#hamburger").click(function(){$("nav").toggleClass('open', 'close');});$(a").click(function(){$("nav").toggleClass('open', 'close');}); 解决方案
只需为您的标题和导航提供绝对定位，并将此代码添加到您的标题和导航 CSS 中:
header {位置:绝对；顶部:0；左侧:0；}导航{位置:绝对；top:80px/* 这是标题的高度... */左:0;}你也可以像这样给你的文本元素添加一个环绕的 div:
<!-- 文本元素-->然后添加这个css代码
.text-c {边距顶部:150px；}工作代码笔https://codepen.io/larrytherabbit/pen/qBNZpjZ
navigation drawer opens by pulling down other web blocks. when it closes blocks come up. additionally drawer menu has occupied more space of my web sites top space. unable to keep blocks near the navigation bar. A big empty space there. But drawer menu works fine. how to solve this issue?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My web</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>MY WEB</h2>
</header>
<nav>
<a href="#"><i class="fa fa-user-secret"></i><span>A</span></a>
<a href="#"><i class="fa fa-check-circle-o"></i><span>B</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>C</span></a>
<a href="#"><i class="fa fa-id-badge"></i><span>D</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>E</span></a>
<a href="#"><i class="fa fa-lightbulb-o"></i><span>F</span></a>
</nav>
<p><span style="font-size: 14pt"><p style="text-align: justify"> <b>Sigiriya
From Wikipedia, the free encyclopedia</b><br>
Location Central Province, Sri Lanka
Coordinates 07°57′25″N 80°45′35″ECoordinates: 07°57′25″N 80°45′35″E
Elevation 349 metres[1]
UNESCO World Heritage Site
Official name: Ancient City of Sigiriya
Type Cultural
Criteria ii, iii, iv
Designated 1982 (6th session)
Reference no. 202
UNESCO Region Asia-Pacific
Sigiriya is located in Sri LankaSigiriya
Location of Sigiriya in Sri Lanka
Sigiriya or Sinhagiri (Lion Rock Sinhala: සීගිරිය, Tamil: சிகிரியா / aசிங்ககிரி, pronounced see-gi-ri-yə) is an ancient rock fortress located in the northern Matale District near the town of Dambulla in the Central Province, Sri Lanka. The name refers to a site of historical and archaeological significance that is dominated by a massive column of rock nearly 200 metres (660 ft) high.[citation needed]
According to the ancient Sri Lankan chronicle the Culavamsa, this site was selected by King Kashyapa (477 – 495 CE) for his new capital. He built his palace on the top of this rock and decorated its sides with colourful frescoes. On a small plateau about halfway up the side of this rock he built a gateway in the form of an enormous lion. The name of this place is derived from this structure — Sīnhāgiri, the Lion Rock (an etymology similar to Sinhapura, the Sanskrit name of Singapore, the Lion City).
The capital and the royal palace was abandoned after the king's death. It was used as a Buddhist monastery until the 14th century.[2] Sigiriya today is a UNESCO listed World Heritage Site. It is one of the best preserved examples of ancient urban planning.[3]
</p></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">.
</script>
</body>
</html>
CSS
header, nav {
background-color: #06C;font-family:'Open Sans';
}
header {
width: 100%;display:flex;align-items:center;
height: 80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor: pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin: 0 15px;
}
.fa-bars, header h2 {
font-size: 28px!important;
}
header h2 {
font-weight: 400!important;
}
nav {
display: flex;flex-direction:column;width:0;align-items:center;
transition: width 0.2s ease;
}
nav.open {
width: 250px;
height: 100%;
}
nav.close {
width:0;
}
nav * {
color: #FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:2px solid gray;width:100%;text-align:left;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
Javascript
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
解决方案
Just give an absolute positioning to your header and nav and add this code to your header and nav CSS:
header {
position:absolute;
top:0;left:0;
}
nav {
position:absolute;
top:80px /* which is the height of header... */
left:0;
}
also you can add a wrapping div to your text elements like this :
<div class="text-c">
<!-- text elements -->
</div>
and then add this css code
.text-c {
margin-top:150px;
}
working codepen https://codepen.io/larrytherabbit/pen/qBNZpjZ
这篇关于通过拉下其他网络块打开导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
