Как правильно оформить блок.меню. ?

Здравствуйте.

вот программа 

html+javascript чистые. jquery=нету.

это меню.

при нажатии на кнопку "бургер(три линии)" слева направо выплывает меню+анимация бургер-крестик и обратно. при повторном нажатии меню уплывает обратно.


Задача:

на главной странице сайта получить меню(справка,help) которое выплывает при нажатии кнопки и уплывает при повторном нажатии той же самой кнопки.сама кнопка анимируется  из трех линий в крестик и обратно в три линии. бургер-крестик-бургер-крестик и тд...кнопка методами "CSS стили" ставится на конкретную позицию типа на экране 150пикселов вниз и 350пикселов вправо.

Как делалось.

написана программка на (html+javascript) чистое минимальное, примешиваний jquery нету.

далее понимается надо оформить блок и затем блок вставить в шаблон.

блок = название блока Menu ...{$wa->block("Menu")} и этот код в блоке(код см ниже).

этот блок вставляется в главный шаблон home.htm

так верно?

Алгоритм.

1 оформил блок. =вставил код.

2 панель: сайт--блоки--- Menu.

3 блок "Menu" вставил в шаблон home.htm=корневой главный шаблон(заглавная страница сайта). это верно?

пишет синтаксическая ошибка в блоке.

как правильно этот код оформить в блок?

на пакете web-разработки Denwer работает корректно.

<! DOCTYPE html>
<html lang="en" >
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<style>
body {
font-family: "Lato", sans-serif;
}
.container {
display: inline-block;
cursor: pointer;
position: fixed;
top: 125px;
left: 350px ;
transform: translate(-50%, -50%);
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.8s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 75px;
font-size: 25px;
margin-left: 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#"> город Санкт-Петербург, Выборгское шоссе 5/1 литера "И"</a>
<a href="#"> +7(812) 980-01-78 </a>
<a href="#"> ВХОД И РЕГИСТРАЦИЯ ЗАХОДИТЕ ПО СВОЕМУ ПРОФИЛЮ </a>
<a href="#"> Справка: смотрите руководства </a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on </p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<body translate="no" >
<div class="container" onclick="burgerMenu(this) ; openNav(); ">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script id="rendered-js" >
function burgerMenu(icon) {
icon.classList.toggle("change");
}
//# sourceURL=pen.js
</script>
</body>
</head>
</html>

4 ответа

  • 2
    replicant 18 октября 2020 01:56 #

    Потому что написано с ошибками, вот движок и ругается. Чтобы проглотило всё это в блоке надо сделать так как в коде ниже. Названия классов немного поменял, т.к. такие у меня задействованы и вам возможно тоже придется менять, если встраивать это в тему дизайна или страницы органично. Скопируйте код и вставьте в блок.

    {literal}
    <style>
    .containerX {
    display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 125px;
    left: 350px ;
    transform: translate(-50%, -50%);
    }
    .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.8s;
    }
    .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-7px, 7px) ;
    transform: rotate(-45deg) translate(-7px, 7px) ;
    }
    .change .bar2 {
    opacity: 0;
    }
    .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -9px) ;
    transform: rotate(45deg) translate(-8px, -9px) ;
    }
    .sidenavX {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    }
    .sidenavX a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0.3s;
    }
    .sidenavX a:hover {
    color: #f1f1f1;
    }
    .sidenavX .closebtn {
    position: absolute;
    top: 0;
    right: 75px;
    font-size: 25px;
    margin-left: 10px;
    }
    @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    }
    </style>
    {/literal}
    
    <div id="mySidenav" class="sidenavX">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#"> город Санкт-Петербург, Выборгское шоссе 5/1 литера "И"</a>
        <a href="#"> +7(812) 980-01-78 </a>
        <a href="#"> ВХОД И РЕГИСТРАЦИЯ ЗАХОДИТЕ ПО СВОЕМУ ПРОФИЛЮ </a>
        <a href="#"> Справка: смотрите руководства </a>
    </div>
    <h2>Animated Sidenav Example</h2>
    <p>Click on </p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    
    {literal}
    <script>
    function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    }
    function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    }
    </script>
    <script>
    window.console = window.console || function(t) {};
    </script>
    <script>
    if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
    }
    </script>
    {/literal}
    
    <div class="containerX" onclick="burgerMenu(this) ; openNav(); ">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    
    {literal}
    <script id="rendered-js" >
    function burgerMenu(icon) {
    icon.classList.toggle("change");
    }
    </script>
    {/literal}

    В идеале, если стилей много, то стоит это вытащить во внешний css или в основной css темы, чтобы блок не мутить. Названия стилей сделать такими, чтобы не пересекались с другими объектами, а то будет всё плясать. Со скриптами то же самое. В блоке должен остаться в идеале только контент и основные обрамляющие его html теги.

  • 1
    CHTR73 17 октября 2020 18:55 #

    то есть на это пишет= Синтаксическая ошибка в блоке Menu

    надо этот код правильно завернуть в блок. 

  • 1
    CHTR73 18 октября 2020 13:01 #

    то есть.

    1 вы это завернули в теги [literal]...[/literal]

    надо этими тегами окружать "стили CSS" и <script>.

    так правильно?

    вроде как чистый javascript для программирования инет-броузеров не использует [literal]...[/literal]


    2 в блок надо прописывать "CSS стили" и "<script>".

    стандартное оформление веб-дела (!Doctype html) (head) (body) (meta) = не надо. 

    то есть= правильно ли понимание ситуации?

    • +2
      replicant replicant 18 октября 2020 15:37 #

      Завернул в теги, т.к. там встречаются { }, а это использует и smarty и надо очень точно соблюдать синтаксис, чтобы движок не выругался на оформление css или на скрипты. Любой лишний или недостающий пробел, переход строки, табуляция не там, где надо, ковровое написание типа минификации и приплыли к ошибке, хотя по факту браузер бы это легко съел. Поэтому берем в {literal}, чтобы отдавать как есть этот код т.е. вот прямо как написано так и будет в браузере. Это избавляет от разбора кусков обрамленного кода и ручного контроля.

      Если код CSS или JS написан валидно, то такие части можно и не обрамлять в literal, но вы должны быть уверены в этом и это стоит проверять отдельно. Со временем привыкнете и будете либо писать корректно, либо обрамлять, либо и то и другое по ситуации.

      Например вот такой код можно не обрамлять

      <style type="text/css">
        .wa-form .wa-field .wa-value textarea { width:450px; height:200px; }
      </style>

      А такой надо

      <style type="text/css">
        .wa-form .wa-field .wa-value textarea {width:450px; height:200px;}
      </style>

      Поэтому, при большом кол-ве CSS-JS, лучше выносить это из блоков во внешние файлы и отдавать там как есть, дабы не грузить лишней работой WA, которому надо оставить в блоках только контент.

      Есс-но никакой обвязки head-body-meta не нужно. Всё это есть в теме дизайна в index.html. Ваша задача написать только локальный фрагмент шаблона или документа.

  • 1
    CHTR73 18 октября 2020 13:08 #

    Спасибо.Вы очень помогли.Можете это отметить как "задача решена".

    Всё сработало хорошо,без ошибок.

    Кнопку бургер-крестик надо равнять по экрану типа top:150px, left:350px точная позиция на экране.

    Можете брать себе и делать свои меню. 

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите