這是我的代碼...這是我第一次嘗試為網(wǎng)站創(chuàng)建代碼,所以如果代碼有點(diǎn)亂,我很抱歉,但我只擔(dān)心& quotsection # TOP _ BAR _ SECTION & quot因?yàn)樗鼞?yīng)該貼在頁面的頂部,但它沒有
const SIDE_MENU_SECTION = window.document.getElementById("SIDE_MENU_SECTION");
const SIDE_MENU_DIV1 = window.document.getElementById("Side_Menu_Div1");
const MAIN_CONTENT_SECTION = window.document.getElementById("MAIN_CONTENT_SECTION");
const TOP_BAR_SECTION = window.document.getElementById("TOP_BAR_SECTION");
const TOP_BAR_DIV1 = window.document.getElementById("Top_Bar_Div1");
const CONTENT_SECTION = window.document.getElementById("CONTENT_SECTION");
const CONTENT_DIV1 = window.document.getElementById("Content_Div1");
var Client_width;
var Client_height;
var Side_menu_section_width;
var Max_width_for_side_menu;
var Loaded = false;
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
/* Quando a pagina terminar o Load, muda o estado da variável Loaded, para garantir que a página está carregada*/
window.onload = PageLoaded;
function PageLoaded(){
Loaded = true;
}
function MainTransitions(New_Time = "0.75s"){
SIDE_MENU_SECTION.style.transitionDuration = New_Time;
SIDE_MENU_DIV1.style.transitionDuration = New_Time;
MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
TOP_BAR_SECTION.style.transitionDuration = New_Time;
TOP_BAR_DIV1.style.transitionDuration = New_Time;
CONTENT_SECTION.style.transitionDuration = New_Time;
CONTENT_DIV1.style.transitionDuration = New_Time;
}
function UpdateVariables1(){
Client_width = document.documentElement.clientWidth;
Client_height = document.documentElement.clientHeight;
Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
Max_width_for_side_menu = Math.max(540,Client_width/3.0);
}
function SideMenuResize(New_Width = 0){
SIDE_MENU_SECTION.style.width = New_Width + "px";
SIDE_MENU_DIV1.style.width = New_Width + "px";
MAIN_CONTENT_SECTION.style.marginLeft = New_Width + "px";
}
function ContentResize(Page_Width = 0,Front_Page_Height = 0){
TOP_BAR_DIV1.style.width = Page_Width + "px";
CONTENT_DIV1.style.width = Page_Width + "px";
}
function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
SideMenuResize(Side_Menu_New_Size);
ContentResize(Main_New_Width,Main_New_Height);
}
window.addEventListener("resize",debounce(function(e){
UpdateVariables1();
if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
}else {
if (Loaded) {
if (Side_menu_section_width === 0) {
MainTransitions("0s");
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
}else {
MainTransitions("0s");
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
}else {
}
}
}));
function debounce(func){
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func,100,event);
};
}
function OpenSideMenu() {
MainTransitions("0.75s");
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
function CloseSideMenu() {
MainTransitions("0.75s");
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
/* Efeitos de neon para a Top_Bar_Logo1*/
const Top_Bar_Logo1_Target = window.document.getElementById("Top_Bar_Div1_Logo1");
const Top_Bar_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
const Top_Bar_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
const Top_Bar_Logo1_FlickerAndColorText = text =>
text
.split('')
.map(Top_Bar_Logo1_FlickerLetter)
.map(Top_Bar_Logo1_ColorLetter)
.join('');
const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target => Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);
const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll('span');
for (let i = 0; i < Top_Bar_Logo1_Letters.length; i++) {
Top_Bar_Logo1_Letters[i].addEventListener('click', () => Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
}
/* Efeitos de neon para a Front_Page_Logo1*/
const Front_Page_Logo1_Target = window.document.getElementById("Content_Div1_Div1_Logo1");
const Front_Page_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
const Front_Page_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
const Front_Page_Logo1_FlickerAndColorText = text =>
text
.split('')
.map(Front_Page_Logo1_FlickerLetter)
.map(Front_Page_Logo1_ColorLetter)
.join('');
const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target => Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);
const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll('span');
for (let i = 0; i < Front_Page_Logo1_Letters.length; i++) {
Front_Page_Logo1_Letters[i].addEventListener('click', () => Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
}
@import url('https://fonts.googleapis.com/css?family=Monoton');
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
background-color: #191919;
background-image: url('img_tree.gif');
background-image: url('imagens/pagina_inicial/congresso_nacional_escurecido_70.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
overflow: auto;
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw;
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
display: block;
background-color: lightgray;
overflow-x: hidden;
transition: 0.75s;
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: 'Monoton', cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer;
color: black;
font-weight: bold;
}
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw);
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: 'Monoton', cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}
<section id="WHOLE_PAGE">
<section id="SIDE_MENU_SECTION">
<div id="Side_Menu_Div1" class="side_menu_div1">
<a id="Side_Menu_Close_Btn" class="side_menu_close_btn" href="javascript:void(0)" onclick="CloseSideMenu()">×</a>
<a id="Side_Menu_Option1" class="side_menu_text" href="#" onclick="location.href = 'sobre.html';">Option1</a>
<a id="Side_Menu_Option2" class="side_menu_text" href="#">Option2</a>
<a id="Side_Menu_Option3" class="side_menu_text" href="#">Option3</a>
<a id="Side_Menu_Option4" class="side_menu_text" href="#">Option4</a>
<a id="Side_Menu_Option5" class="side_menu_text" href="#">Option5</a>
</div>
</section>
<section id="MAIN_CONTENT_SECTION">
<section id="TOP_BAR_SECTION">
<div id="Top_Bar_Div1" class="top_bar_div1">
<h1 id="Top_Bar_Div1_Menu1" class="top_bar_div1_menu1" onclick="OpenSideMenu();" href="#">☰ Menu</h1>
<h1 id="Top_Bar_Div1_Logo1" class="top_bar_div1_logo1" onclick=";">TEXT</h1>
</div>
</section>
<section id="CONTENT_SECTION">
<div id="Content_Div1" class="content_div1">
<div id="Content_Div1_Div1" class="content_div1_div1">
<h1 id="Content_Div1_Div1_Text1" class="content_div1_div1_text1">Text</h1>
<h1 id="Content_Div1_Div1_Logo1" class="content_div1_div1_logo1">Text</h1>
</div>
<div id="Content_Div1_Div2" class="content_div1_div2">
<p id="Content_Div1_Div2_P1" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<p id="Content_Div1_Div2_P2" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
</div>
</div>
</section>
</section>
</section>
您的節(jié)#SIDE_MENU_SECTION和節(jié)#CONTENT_SECTION選擇器缺少右大括號(hào)}
在你的。懸停和。content_div1_div2_p選擇器。
看起來你試圖嵌套CSS選擇器,這在普通CSS中是無效的。我通過驗(yàn)證工具運(yùn)行了您的CSS以找到錯(cuò)誤。你可以在未來使用這個(gè)工具來驗(yàn)證你自己的CSS:https://jigsaw.w3.org/css-validator/#validate_by_input
既然代碼是有效的,那么發(fā)現(xiàn)問題就容易多了。粘性頭的問題是它的一堆父元素有溢出:隱藏或位置:固定在它們上面。您不能這樣做,因?yàn)閟ticky元素需要能夠正確地獲得滾動(dòng)位置,而這些類型的屬性會(huì)阻止這一點(diǎn)。看到下面的演示,我在我注釋掉的所有內(nèi)容上面加了一個(gè)/*這是注釋掉的*/ comment。這也有我上面提到的你的固定牙套。
const SIDE_MENU_SECTION = window.document.getElementById("SIDE_MENU_SECTION");
const SIDE_MENU_DIV1 = window.document.getElementById("Side_Menu_Div1");
const MAIN_CONTENT_SECTION = window.document.getElementById("MAIN_CONTENT_SECTION");
const TOP_BAR_SECTION = window.document.getElementById("TOP_BAR_SECTION");
const TOP_BAR_DIV1 = window.document.getElementById("Top_Bar_Div1");
const CONTENT_SECTION = window.document.getElementById("CONTENT_SECTION");
const CONTENT_DIV1 = window.document.getElementById("Content_Div1");
var Client_width;
var Client_height;
var Side_menu_section_width;
var Max_width_for_side_menu;
var Loaded = false;
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
/* Quando a pagina terminar o Load, muda o estado da variável Loaded, para garantir que a página está carregada*/
window.onload = PageLoaded;
function PageLoaded(){
Loaded = true;
}
function MainTransitions(New_Time = "0.75s"){
SIDE_MENU_SECTION.style.transitionDuration = New_Time;
SIDE_MENU_DIV1.style.transitionDuration = New_Time;
MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
TOP_BAR_SECTION.style.transitionDuration = New_Time;
TOP_BAR_DIV1.style.transitionDuration = New_Time;
CONTENT_SECTION.style.transitionDuration = New_Time;
CONTENT_DIV1.style.transitionDuration = New_Time;
}
function UpdateVariables1(){
Client_width = document.documentElement.clientWidth;
Client_height = document.documentElement.clientHeight;
Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
Max_width_for_side_menu = Math.max(540,Client_width/3.0);
}
function SideMenuResize(New_Width = 0){
SIDE_MENU_SECTION.style.width = New_Width + "px";
SIDE_MENU_DIV1.style.width = New_Width + "px";
MAIN_CONTENT_SECTION.style.marginLeft = New_Width + "px";
}
function ContentResize(Page_Width = 0,Front_Page_Height = 0){
TOP_BAR_DIV1.style.width = Page_Width + "px";
CONTENT_DIV1.style.width = Page_Width + "px";
}
function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
SideMenuResize(Side_Menu_New_Size);
ContentResize(Main_New_Width,Main_New_Height);
}
window.addEventListener("resize",debounce(function(e){
UpdateVariables1();
if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
}else {
if (Loaded) {
if (Side_menu_section_width === 0) {
MainTransitions("0s");
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
}else {
MainTransitions("0s");
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
}else {
}
}
}));
function debounce(func){
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func,100,event);
};
}
function OpenSideMenu() {
MainTransitions("0.75s");
UpdateVariables1();
ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
function CloseSideMenu() {
MainTransitions("0.75s");
UpdateVariables1();
ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
}
/* Efeitos de neon para a Top_Bar_Logo1*/
const Top_Bar_Logo1_Target = window.document.getElementById("Top_Bar_Div1_Logo1");
const Top_Bar_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
const Top_Bar_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
const Top_Bar_Logo1_FlickerAndColorText = text =>
text
.split('')
.map(Top_Bar_Logo1_FlickerLetter)
.map(Top_Bar_Logo1_ColorLetter)
.join('');
const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target => Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);
const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll('span');
for (let i = 0; i < Top_Bar_Logo1_Letters.length; i++) {
Top_Bar_Logo1_Letters[i].addEventListener('click', () => Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
}
/* Efeitos de neon para a Front_Page_Logo1*/
const Front_Page_Logo1_Target = window.document.getElementById("Content_Div1_Div1_Logo1");
const Front_Page_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
const Front_Page_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
const Front_Page_Logo1_FlickerAndColorText = text =>
text
.split('')
.map(Front_Page_Logo1_FlickerLetter)
.map(Front_Page_Logo1_ColorLetter)
.join('');
const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target => Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);
const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll('span');
for (let i = 0; i < Front_Page_Logo1_Letters.length; i++) {
Front_Page_Logo1_Letters[i].addEventListener('click', () => Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
}
@import url('https://fonts.googleapis.com/css?family=Monoton');
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
background-color: #191919;
background-image: url('img_tree.gif');
background-image: url('imagens/pagina_inicial/congresso_nacional_escurecido_70.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow: auto;*/
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw;
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
display: block;
background-color: lightgray;
overflow-x: hidden;
transition: 0.75s; }
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
}
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: 'Monoton', cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer;
color: black;
font-weight: bold;
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
}
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw);
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: 'Monoton', cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}
<section id="WHOLE_PAGE">
<section id="SIDE_MENU_SECTION">
<div id="Side_Menu_Div1" class="side_menu_div1">
<a id="Side_Menu_Close_Btn" class="side_menu_close_btn" href="javascript:void(0)" onclick="CloseSideMenu()">×</a>
<a id="Side_Menu_Option1" class="side_menu_text" href="#" onclick="location.href = 'sobre.html';">Option1</a>
<a id="Side_Menu_Option2" class="side_menu_text" href="#">Option2</a>
<a id="Side_Menu_Option3" class="side_menu_text" href="#">Option3</a>
<a id="Side_Menu_Option4" class="side_menu_text" href="#">Option4</a>
<a id="Side_Menu_Option5" class="side_menu_text" href="#">Option5</a>
</div>
</section>
<section id="MAIN_CONTENT_SECTION">
<section id="TOP_BAR_SECTION">
<div id="Top_Bar_Div1" class="top_bar_div1">
<h1 id="Top_Bar_Div1_Menu1" class="top_bar_div1_menu1" onclick="OpenSideMenu();" href="#">☰ Menu</h1>
<h1 id="Top_Bar_Div1_Logo1" class="top_bar_div1_logo1" onclick=";">TEXT</h1>
</div>
</section>
<section id="CONTENT_SECTION">
<div id="Content_Div1" class="content_div1">
<div id="Content_Div1_Div1" class="content_div1_div1">
<h1 id="Content_Div1_Div1_Text1" class="content_div1_div1_text1">Text</h1>
<h1 id="Content_Div1_Div1_Logo1" class="content_div1_div1_logo1">Text</h1>
</div>
<div id="Content_Div1_Div2" class="content_div1_div2">
<p id="Content_Div1_Div2_P1" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<p id="Content_Div1_Div2_P2" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
</div>
</div>
</section>
</section>
</section>