gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust css examples formatting (#26127)

Browse Source
This commit is contained in:
David Way
2018-12-13 05:03:03 +00:00
committed by Tom
parent 18d5502965
commit 012e93154b
35 changed files with 303 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
guide/english/css/dropdowns/index.md
View File

@ -47,27 +47,27 @@ You need the separate div classes to create the button, and another div to separ
```html
<div id="container">
<div id="myNav1" class="overlay">
<div class="overlay-content" id="myNav1-content">
<div>
<a href="#" id="list1_obj1" class="list1" >Content 1</a>
</div>
<div>
<a href="#" id="list1_obj2" class="list1" >Content 2</a>
</div>
</div>
</div>
<div id="myNav2" class="overlay">
<a href="javascript:void(10)" class="closebtn" onclick="closeNav()">&times</a>
<div class="overlay-content" id="myNav2-content">
<div>
<a href="#" id="list2_obj1" class="list2" >Content 3</a>
</div>
@ -77,58 +77,58 @@ You need the separate div classes to create the button, and another div to separ
<div>
<a href="#" id="list2_obj3" class="list2" >Content 5</a>
</div>
</div>
</div>
</div>
```
```css
#myNav1 {
height: 0;
width: 50%;
position: fixed;
z-index: 6;
top: 0;
left: 0;
background-color: #ffff;
overflow: hidden;
transition: 0.3s;
opacity: 0.85;
height: 0;
width: 50%;
position: fixed;
z-index: 6;
top: 0;
left: 0;
background-color: #ffff;
overflow: hidden;
transition: 0.3s;
opacity: 0.85;
}
#myNav2 {
height: 0;
width: 50%;
position: fixed;
z-index: 6;
bottom: 0;
right: 0;
background-color: #ffff;
overflow: hidden;
transition: 0.3s;
opacity: 0.85;
height: 0;
width: 50%;
position: fixed;
z-index: 6;
bottom: 0;
right: 0;
background-color: #ffff;
overflow: hidden;
transition: 0.3s;
opacity: 0.85;
}
.overlay-content {
position: relative;
width: 100%;
text-align: center;
margin-top: 30px;
position: relative;
width: 100%;
text-align: center;
margin-top: 30px;
}
#myNav1-content{
top: 12%;
left: 5%;
display: none;
top: 12%;
left: 5%;
display: none;
}
#myNav2-content{
top: 12%;
right: 10%;
display: none;
top: 12%;
right: 10%;
display: none;
}
```