Как сделать меню с языковым выпадающим меню и телефонной ссылкой, используя Bootstrap 4 и navbar-toggler? - PullRequest
Новая
       28

Как сделать меню с языковым выпадающим меню и телефонной ссылкой, используя Bootstrap 4 и navbar-toggler?

0 голосов
/ 10 января 2019 

.phone-link {
    border-radius: 25px;
    background-color: lightblue;
    color: #ffffff;
    padding: 15px 25px;
}

.navbar-nav {
    margin-right: 40px;
}

.navbar-nav .nav-item {
    padding: 25px;
}


@media (max-width: 999px) {
    .phone-link {
        display: none;
    }
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
    
    
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded ">
            <a class="navbar-brand" href="#"><img class='img-fluid' src="http://www.clker.com/cliparts/J/3/1/I/n/T/twitter-icon-th.png"
                    alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09"
                aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsExample09">
                <ul class="navbar-nav w-100 justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-us"> </span>
                    English</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
                    <a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
                    <a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
                </div>
            </div>
            <div class='phone-link'>
                <a href="tel:12-12-12-12"><i class="fas fa-phone fa-rotate-90"></i>12 12 12 12</a>
            </div>
        </nav>
    </div>

Как сделать так, чтобы выпадающий язык + телефонная связь всегда были справа или по центру, а переключатель - по центру или справа (зависит от того, где он будет соответствовать проекту). После нажатия кнопки переключения должно появиться меню, и выпадающий язык + телефонная ссылка останутся на своем месте (справа или по центру) не ниже меню? введите описание изображения здесь

1 Ответ

0 голосов
/ 10 января 2019

Я немного изменил HTML. Но, самая большая часть заключается в том, что позиционированием языковой кнопки манипулируют так, что загрузчик по умолчанию может работать без перекодирования css. Меню гамбургера находится справа, поэтому я переместил его влево от меню, используя position: absolute; и right: 100px;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style type="text/css">
	.phone-link {
		border-radius: 25px;
		background-color: lightblue;
		color: #ffffff;
		padding: 15px 25px;
	}

	.navbar-nav {
		margin-right: 40px;
	}

	.navbar-nav .nav-item {
		padding: 25px;
	}


	@media (max-width: 999px) {
		.phone-link {
			display: none;
		}
	}

	.dropdown.language {
		position: absolute; 
		right: 200px; 
		width: auto;
		top: 35px;
	}
	@media (max-width: 991px) {
		.dropdown.language {
			right: 100px;
			position: absolute; top: 10px;
		}
	}
</style>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">
		<img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>

	</button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown">
		<ul class="navbar-nav">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Features</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Pricing</a>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Dropdown link
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
				</div>
			</li>
		</ul>

	</div>

	<div class='phone-link'>
		<a href="tel:12-12-12-12"><i class="fas fa-phone fa-rotate-90"></i>12 12 12 12</a>
	</div>
	<div class="dropdown language">
		<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="flag-icon flag-icon-us"></span> English
		</button>
		<div class="dropdown-menu dropdown-menu-right text-right language">
			<a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
			<a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
			<a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
		</div>
	</div>
</nav>
...