如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏

Posted

技术标签:

【中文标题】如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏【英文标题】：how to round off the tabs above and below the current tab in the nav bar, also shadow the nav bar except the current tab 【发布时间】：2021-11-05 15:21:33 【问题描述】：

我之前从未问过 css 问题，所以提前道歉。

这是我的导航栏目前的样子full sized image here

我真正想要实现的两件事：

    当前选项卡正上方和下方的圆形选项卡 （在这张图片中是建议和关于我们） 在除当前选项卡之外的右侧隐藏导航栏

（顺便说一句，我正在使用 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 %

【问题讨论】：

【参考方案1】：

你可以试试

drop-shadow()（但它适用于任何半透明边缘 => 不幸的是文本）通过 filter 绘制阴影。 box-shadow 从.current 绘制导航background overflow:hidden 在nav 上以避免阴影在main 上流血 position: relative 用于 h2 保持在阴影顶部 & static 用于.current

这是可能的更新的想法

: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 0.15rem 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset 1px 0.1rem 0.2rem -0.1rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.2rem -0.1rem rgba(0, 0, 0, 0.3);
  --shadow-nav: 0.3rem 0 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    0.2rem 0 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-current: inset 0.3rem 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 0.2rem 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-hover: inset 1px 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 1px 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.4rem -0.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 0.5s ease;

a 
  color: var(--text);
  text-decoration: none;

a:hover 
  color: var(--green);

nav 
  position: fixed;
  top: -1rem;
  bottom: -1rem;
  left: 0;
  width: 18%;
  padding: 1rem 0;
  min-height:100vh;
  overflow: hidden;
  filter: drop-shadow(0.3rem 0.3rem 0.6rem);
  

nav h2 
  margin: 0;
  padding: 10%;
  padding-right: 0 !important;
  height: 1.8rem;
  transition: margin 0.5s, padding 0.5s, border 0.5s, background 0.5s,
    color 0.3s;
  position: relative;
  color: var(--nav-text);


nav h2.current:hover 
  box-shadow: var(--shadow-hover), 0 0 0 100vw var(--nav-bg);

nav h2.current 
  margin-left: 5%;
  padding-left: 5%;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: 0 0 0 100vmax var(--nav-bg);
  color: var(--text);
  position: static;

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: 0.35rem;
  padding: 0.25rem;
  padding-right: 2.5rem;
  border-radius: 0.25rem;
  font: 0.5rem sans-serif;
  text-align: right;
  background: hsl(40, 39%, 90%);
  box-shadow: var(--shadow-in);

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

注意：这个函数有点类似于box-shadow 属性。 box-shadow 属性在元素的整个框后面创建一个矩形阴影，而 drop-shadow() 过滤器函数创建一个符合图像本身形状（alpha 通道）的阴影。

【讨论】：

谢谢@G-Cyrillus :) 由于几周内没有其他人提供答案，因此我接受您的答案作为迄今为止最好和唯一的解决方案。干杯

以上是关于如何在导航栏中舍入当前选项卡上方和下方的选项卡，除了当前选项卡之外，还隐藏导航栏的主要内容，如果未能解决你的问题，请参考以下文章

iphone：需要在视图控制器中实现导航控制器，该控制器在选项卡栏中选择选项卡后出现

弹出导航控制器并选择选项卡？

使用 router.navigate 时更改导航栏中的活动选项卡

Swift 导航控制器嵌入在带有 segue 的选项卡栏中

尝试将 Font-Awesome 图标添加到我的导航栏中的选项卡

使用 Sprite 的 CSS 导航菜单：如何突出显示当前页面的选项卡/按钮？