Возникли проблемы с фреймами - PullRequest
Новая
       24

Возникли проблемы с фреймами

0 голосов
/ 05 октября 2019

Как сделать так, чтобы iframe занимал пространство статьи, но отображался только при нажатии на ссылку на панели навигации, а также, (iframe будет на пути локализованного изображения, а также на ссылкена панели навигации). ИСПОЛЬЗОВАНИЕ HTML и CSS

Я искал по всей сети, но ничего не нашел. 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>blah blah blah</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: garamond;
            transition: background-color .5s;
        }

        h2 {
            font-family: garamond;
            color: greenyellow
        }

        h3 {
            font-family: garamond;
            color: darkcyan
        }

        article {
            text-align: center;
            font-family: garamond;
            color: black;
            font-size: 18px;
        }

        footer {
            font-family: garamond;
            color: greenyellow
        }

        .header {
            padding: 30px;
            text-align: center;
            background: #111;
            color: greenyellow;
            font-size: 20px;
            font-family: garamond
        }

        .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: 25px;
            color: #7d12ff;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: greenyellow;
        }

        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        #main {
            transition: margin-left .5s;
            padding: 16px;
        }

        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }

            .sidenav a {
                font-size: 18px;
            }
        }

    </style>
</head>

<body>

    <div class="header">
        <h1>blahblah blah</h1>
        <p>blah blah blah blah blah </p>
    </div>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="../random.html">blah</a>
        <a href="../random.html">blah</a>
        <a href="../random.html">blah</a>
        <a href="../random.html">blah</a>
        <a href="../random.html">blah</a>
        <a href="../random.html">blah</a>

    </div>

    <div id="main">
        <span style="font-size:30px;cursor:pointer;color:darkslateblue;" onclick="openNav()">&#9776; Navigation bar</span>
    </div>

    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }

    </script>
    <article>
<p> Lorem ipsum dolor sit amet, cu oratio timeam qui. Est eu primis veritus rationibus. Per no mucius recteque, graeco tritani prodesset te sea. Et per eros dissentiunt.

Vide rebum at usu, utamur fabulas mandamus no eam. Graece appareat ex sit, quo erroribus inciderint te. Ex quod vitae disputando qui, has ea wisi nusquam. Nam saperet volumus petentium ex, an ius nostrum sententiae, euismod copiosae pri in. Natum dicam luptatum mel eu, ea vel diam case. Pro probo invidunt ne, et scripta periculis sea, ei hinc falli mei.

Vix eu utinam voluptua iracundia. Ad vix veritus tractatos expetendis, his porro summo no. Eam facilisi dissentiunt et, ad vis vidit legimus mediocritatem, te est laoreet meliore mentitum. Ex ignota putant commodo vim, te aperiam fastidii consequuntur qui. Omnes imperdiet ex eam.

Esse modus vis ea. Sea dolorum meliore tibique in, id atqui nihil saperet vix. Pri rebum ludus ea, ne vix eius magna. Aliquid honestatis consectetuer in sea. Nec velit insolens adversarium no, no his etiam oblique, dolore antiopam contentiones ut eum. Illum semper eleifend et vis.

Mel detracto verterem ut, qui stet alienum eu, suscipit definitiones ei nam. Animal nostrum fastidii ius ei, wisi honestatis ad mea. Est et velit dicam aliquip. Quod necessitatibus no mea, his adhuc mazim nominavi at, timeam recteque necessitatibus vis an. Ea natum fabulas expetenda nam, mutat ocurreret quo eu.<p>
</article>
</body>

</html>
...