私は以前にcssの質問をしたことがないので、事前にお詫び申し上げます。
これは私のナビゲーションバーが現在フルサイズの画像のように見えるものです
私が本当に達成したい2つのこと：
- 現在のタブのすぐ上と下にある一連のタブ
(この図では、 [提案]と[会社概要] になります) - 現在のタブを除いて右側のナビゲーション バーに影を付ける
（私はjinja2を使用しています。現在のタブが固定されていないため、コーナーをハードコーディングできません）
1.についてはわかりませんが、2.を試してみましたが、これは満足のいく結果ではありません:
急激なコーナーを取り除きたい
これは私の現在のスタイルシートです
:root {
/* colour palette */
--cream : hsl(40, 100%, 96%);
--cream-light:hsl(40, 100%, 98%);
--coffee: hsl(40, 14%, 62%);
--purple: hsl(258, 14%, 62%);
--dark : hsl(109, 7%, 33%);
--green : hsl(128, 30%, 42%);
--green2: hsl(140, 15%, 55%);
--green2-dark: hsl(140, 11%, 36%);
/* */
--shadow-in: inset 1px .15rem .3rem -.1rem rgba(50, 50, 93, 0.25), inset 1px .1rem .2rem -.1rem rgba(0, 0, 0, 0.3), inset -1px -1px .3rem -.1rem rgba(50, 50, 93, 0.25), inset -1px -1px .2rem -.1rem rgba(0, 0, 0, 0.3);
--shadow-nav: .3rem 0 .6rem -.2rem rgba(50, 50, 93, 0.25), .2rem 0 .4rem -.2rem rgba(0, 0, 0, 0.3);
--shadow-current: inset .3rem .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset .2rem .2rem .4rem -.2rem rgba(0, 0, 0, 0.3);
--shadow-hover: inset 1px .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset 1px .2rem .4rem -.2rem rgba(0, 0, 0, 0.3), inset -1px -1px .6rem -.2rem rgba(50, 50, 93, 0.25), inset -1px -1px .4rem -.2rem rgba(0, 0, 0, 0.3);
/* themes */
--nav-bg : var(--green2-dark);
--nav-text : white;
--nav-hover: hsl(140, 11%, 27%);
--main : var(--cream );
--text : var(--dark );
--highlight: var(--green);
--card : var(--cream-light);
}
html, body {
margin: 0;
font-size: 1.5vw;
background: var(--nav-bg);
transition: all .5s ease;
}
a {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--green);
}
nav {
position: fixed;
top: 0;
left: 0;
width: 18%;
height: 100vh;
/*box-shadow: var(--shadow-nav);*/
/*box-shadow: .3rem 0 .6rem rgba(50, 93, 50, 0.25), .2rem 0 .4rem rgba(0, 0, 0, 0.3);*/
background: var(--nav-bg);
}
nav h2 {
margin: 0;
padding: 10%;
padding-right: 0 !important;
height: 1.8rem;
background: var(--nav-bg);
color: var(--nav-text);
transition: margin .5s, padding .5s, border .5s, background .5s, color .3s;
}
/*nav div.current {
width: 100%;
padding-right: .9rem;
background: linear-gradient(90deg, hsl(140, 11%, 36%) 50%, hsl(40, 100%, 96%) 50%);
}
nav div.current:hover {
padding-right: 0;
}*/
nav h2.current {
margin-left: 5%;
padding-left: 5%;
border-radius: .5rem 0 0 .5rem;
box-shadow: var(--shadow-current);
background: var(--main);
color: var(--text);
}
nav h2:hover {
margin: 0;
padding: 10%;
padding-left: 15%;
border-radius: 0;
box-shadow: var(--shadow-hover);
background: var(--nav-hover);
color: var(--nav-text);
}
main {
padding-left: 22.5%;
padding-right: 7.5%;
min-height: 100vh;
background: var(--main);
color: var(--text);
display: flex;
flex-direction: column;
}
main h1 {
color: var(--green2);
}
footer {
margin-top: auto;
margin-bottom: .35rem;
padding: .25rem;
padding-right: 2.5rem;
border-radius: .25rem;
font: .5rem sans-serif;
text-align: right;
background: hsl(40, 39%, 90%);
box-shadow: var(--shadow-in);
}
これはlayout.htmlです
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Library</title>
<meta charset='UTF-8'>
</head>
<body>
<nav>
{% include 'navigation.html' %}
</nav>
<main>
{% block main %} {% endblock %}
<footer>Copyright 2021 mightbesimon | github.com/mightbesimon</footer>
</main>
</body>
</html>
そしてこれはnavigation.html
{% for url, name in (('/' , 'Home' ),
('/register' , 'Register' ),
('/login' , 'Login' ),
('/suggestions', 'Suggestions' ),
('/catalogue' , 'Our Catalogue'),
('/aboutus' , 'About Us' ),
('/contact' , 'Contact' ),
) %}
<a href="{{ url }}">
<!-- <div {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}> -->
<h2 {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}>
{{ name }}
</h2>
<!-- </div> -->
</a>
{% endfor %}