Внедренная ссылка на Twitter, отображаемая выше выпадающего списка гамбургеров - PullRequest
Новая
       0

Внедренная ссылка на Twitter, отображаемая выше выпадающего списка гамбургеров

0 голосов
/ 10 ноября 2018

Я создаю веб-сайт для класса колледжа и столкнулся с проблемой. Кажется, я не могу найти ответ, когда гуглю его, поэтому я создал аккаунт, чтобы опубликовать его здесь. Я надеюсь, что кто-то сможет определить, что происходит.

Here is an image of the problem in action

Как видите, встроенный пост в Твиттере отображается в верхней части меню гамбургеров, и я не уверен, как его получить.

Вот HTML-код (он все еще находится в стадии разработки, и я довольно новичок, поэтому, пожалуйста, простите меня за любой уродливый код): 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="height=device-height, initial-scale=1.0">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
    <header>
        <div id="weatherBar" class="weatherBar">
            <button class="hamburger">&#9776;</button>
            <button class="cross">&#735;</button>
            <nav class="menu">
                <ul>
                    <li>
                        <a href="#events">About the Events</a>
                        <ul class="submenu">
                            <li><a href="#starting">Starting Times</a></li>
                            <li><a href="#">Course Details</a></li>
                            <li><a href="#">What to Bring</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Upcoming Events</a></li>
                    <li><a href="#">Registration</a></li>
                    <li><a href="#">Packet Pick Up</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="socialLinks">
                <a href="#"><img src="images/fb-ico.png" alt="" class="iconHeight"></a>&nbsp;
                <a href="#"><img src="images/twit-ico.png" alt="" class="iconHeight"></a>&nbsp;
                <a href="#"><img src="images/inst-ico.png" alt="" class="iconHeight"></a>
            </div>
        </div>
    </header>
    <main class="wrapper">
        <div id="details" class="details lightSub contentFill contentPad">
            <h2 class="subHeader">What People are Saying</h2>
            <div class="sub_head_line_white"></div>
            <div class="socialWrapper centering">
                <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
            </div>
            <div class="socialWrapper centering">
                <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can&#39;t wait to get in the water for open water swims!</p>&mdash; CAS 222 (@pcccas222) <a href="https://twitter.com/pcccas222/status/994599695136653312?ref_src=twsrc%5Etfw">May 10, 2018</a></blockquote>
            </div>
        </div>
    </main>
    <footer></footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="scripts/ham.js"></script>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

Вот код JavaScript: 

$(document).ready(function () {


    $(".cross").hide();

    $(".menu").hide();

    $(".hamburger").show();

    $(".hamburger").on("click", function () {
        $(".menu").slideToggle("slow");
        $(".hamburger").hide();
        $(".cross").show();
    });

    $(".cross").on("click", function () {
        $(".menu").slideToggle("slow");
        $(".cross").hide();
        $(".hamburger").show();
    });

    $(".menu a").on("click", function () {
        $(".menu").slideToggle("slow");
        $(".cross").hide();
        $(".hamburger").show();
    });


});

Вот CSS:

Menu.css 

.hamburger {
    background: none;
    position: relative;
    top: 0;
    right: 0;
    line-height: 35px;
    color: red;
    border: 0;
    font-size: 1.4em;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    z-index: 10;
}

.cross {
    background: none;
    position: relative;
    top: 0;
    right: 0;
    color: red;
    border: 0;
    font-size: 3em;
    line-height: 55px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    z-index: 10;
}

.socialLinks {
    background: none;
    position: fixed;
    top: 8px;
    right: 10px;
    color: red;
    border: 0;
    cursor: pointer;
    outline: none;
    z-index: 10;
    }

.iconHeight {
    height: 20px;
}

.menu {
/*    z-index: 10;*/
    font-weight: 700;
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0, .85);
    position: absolute;
    top: 25px;
    padding-top: 20px;
    right: 0;
    text-align: left;
    font-size: 2em;
    text-decoration: none;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    z-index: 10;
}



.menu ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
}

.menu li {
    display: block;
    padding: 15px 0;
    padding-left: 25px;
    padding-right: 25px;
}

.menu li:hover {
    display: block;
    padding: 15px 0;
    padding-left: 25px;
    padding-right: 25px;
    color: red;
}

.menu ul a {
    text-decoration: none;
    color: white;
    margin: 0;
}

.menu ul a:hover {
    text-decoration: none;
    color: red;
}

.menu ul a:active {
    text-decoration: none;
    color: white;
}

.menu ul a:visted {
    text-decoration: none;
    color: gray;
}

.submenu li {
    padding-left: 25px;
}

style.css 

body {
    .grayGradient;
}
main {}
.hero {

    background-image: url(../images/run3.jpg);
    background-size: auto;
    background-position: center;
    height: 500px;
    width: 100%;
}
.heroBot {
    width: 100%;
    height: 20px;
    background-color: #000;
}

.weatherBar {
    position: fixed;
    height: 40px;
    width: 100%;
    background: black;
    border-bottom: 3px red solid;
    margin-left: auto;
    margin-right: auto;
}

footer {
    height: 30px;
    width: 100%;
    background: black;
    border-top: 3px red solid;
}
h1 {
    .fontOswald;
    font-size: 60px;
    color: white;
    font-weight: bold;
    text-align: center;
}
.headerSize {
    font-size: 50px;
    .fontNarrow;
    font-weight: normal;
    letter-spacing: 1px;
}
.titleDiv {
    padding-left: 15px;
    width: 95%;
    padding-top: 40px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    border-bottom: 3px red solid;

}
.titleText {
    padding-top: 20px;
    padding-bottom: 20px;
}

.disc {
    margin-top: 40px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    .fontBaseText;
    font-size: 1.5em;
    color: #000;
    text-align: center;
    font-weight: lighter;
    line-height: 30px;
}

.facebookFeed {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.contentPad {
    padding: 20px 20px 45px 20px;
}

.contentFill p {
    font-size: 1.2em;
    .fontBaseText;
    line-height: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.subHeader {
    .fontNarrow;
    font-size: 1.8em;
}
.subHeaderAlt {
    .fontNarrow;
    font-size: 1.8em;
    color: #fff;
}

.sub_head_line {
    height: 5px;
    width: 95%;
    .grayGradientBtR;
}

.sub_head_line_white {
    height: 5px;
    width: 95%;
    .grayGradientWtR;
}


.darkSub {
    background-color: #000;
    color: #fff;
}

.lightSub {
    background-color: #fff;
    color: #000;
}

.tableDay {
    text-align: center;
    font-size: 1.2em;
    .fontNarrow;
}

.timesTable {
    margin: 10px;
    margin-top: 20px;
    align-content: center;
    .fontBaseText;
}

.timesTable tr:first-child {
    border: none;
}
.timesTable tr {
    border-left: 2px @mainRed solid;
    border-right: 2px @mainRed solid;
}

.timesTable table,
tr,
td,
th {
    border-collapse: collapse;
    padding: 3px;
}



.timesTable th {
    font-weight: bold;
    padding: 10px;
}
.timesTable td {
    padding: 10px;
}

.timesTable tr:nth-child(even) {
    background-color: @darkGray;
}

.raceName {
    width: 180px;
}

.raceTime {
    width: 100px;
}
.startingTimeTableWrapper {
    width: 100%;
}

.centering {
    .marginCenter;
}

.socialWrapper {
    width: 350px;
    margin-top: 10px;
    z-index: -1;
}
.subHeader:before {
    height: 25px;
    display: block;
    content: '';
}
.subHeaderAlt:before {
    height: 25px;
    display: block;
    content: '';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...