html встроенная кнопка отображения боковой панели - PullRequest
Новая
       2

html встроенная кнопка отображения боковой панели

0 голосов
/ 10 июля 2020

Я создаю новую боковую панель html / css для навигации по сайту. В настоящее время она сворачивается, когда страница становится слишком маленькой. Я пытаюсь сделать кнопку «M», которая при нажатии будет сворачивать / расширять боковую панель. У меня добавлена ​​кнопка (id = 'sideButton'), но кнопка плавает под моим текстом «Заголовок веб-сайта», например: 

Website Title
                ( M )
About
Home

И я пытаюсь использовать css / html для стилизации кнопки чтобы появиться рядом с моим текстом «Заголовок веб-сайта», например: 

Website Title ( M )       
About
Home

Моя кнопка размещена рядом с элементом, но она не выравнивается рядом с моим текстом? Как я могу изменить css, чтобы стилизовать мою кнопку (M) так? Я пробовал display: inline, но он не изменился 

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='{{ icon }}' type='image/x-icon' />
    <title>{{ pageTitle }}</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>

<!-- Style -->
<style>

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #f7f9fb; /* NAVBAR BACKGROUND */
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    /* background: #6d7fcc; */
}

#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

.currentPage, .currentPage *{
    background: #bed6b8 !important;
}


#sidebar ul li a:hover {
    color: #000;
    background: #8FC1E3; /* hover tab color */
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    /* color: #fff; */
    background: #f7f9fb; /* active tab */
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #f7f9fb;    /* tab list color */
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}

/* Sidebar expand/collapse button */
#sidebutton {
  margin-left: 100%;
   box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3); 
   border: none;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  cursor: pointer;
}

</style>

<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
    });
</script>

<!-- Page Content -->
<div class="wrapper" class="toggled">
    <!-- Sidebar  -->
    <nav id="sidebar">

        <div class="sidebar-header">
            <h3>Website Title</h3> <button id='sidebutton'>M</button>
        </div>

        <ul class="list-unstyled components">
            <li class="currentPage" >
                <a href="#" >Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>

    </nav>

 
</div>

</html>

Ответы [ 2 ]

0 голосов
/ 10 июля 2020 

$(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
});
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.btn-info {
    color: #fff;
    background-color: #b81717;
    border-color: #52b817;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #f7f9fb; /* NAVBAR BACKGROUND */
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    display: inline-flex;
    padding: 20px;
    /* background: #6d7fcc; */
    position: relative;
    width: 100%;
}

#sidebar ul.components {
    /* padding: 20px 0; */
    /* border-bottom: 1px solid #47748b; */
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

.currentPage, .currentPage *{
    background: #bed6b8 !important;
}


#sidebar ul li a:hover {
    color: #000;
    background: #8FC1E3; /* hover tab color */
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    /* color: #fff; */
    background: #f7f9fb; /* active tab */
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #f7f9fb;    /* tab list color */
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        color: pink
        display: inline;
    }
}

/* Sidebar expand/collapse button */
#sidebutton {
      margin-left: 84%;
    box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='{{ icon }}' type='image/x-icon' />
    <title>{{ pageTitle }}</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!-- bootstrap css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>


<!-- Page Content -->
<div class="wrapper" class="toggled">
    <!-- Sidebar  -->
    <nav id="sidebar">

        <div class="sidebar-header">
            <h3>Website Title</h3> <button id='sidebutton'>M</button>
        </div>

        <ul class="list-unstyled components">
            <li class="currentPage" >
                <a href="#" >Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>

    </nav>

 
</div>

</html>
0 голосов
/ 10 июля 2020

Вы можете сделать .sidebar-header гибкий контейнер: 

.sidebar-header {
  display: flex;
}

И на этом этапе удаление margin-left: 100%; из кнопки «M» должно помочь. Отсюда вы можете настроить его как хотите

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...