Html 如何在单击侧导航栏元素时使书签成为一种功能区？_Html_Css_Css Shapes

Html 如何在单击侧导航栏元素时使书签成为一种功能区？

html css

Html 如何在单击侧导航栏元素时使书签成为一种功能区？,html,css,css-shapes,Html,Css,Css Shapes,我的应用程序中有一个侧导航栏，由4个导航项组成。在初始荷载下，它们应如下所示- 单击每个项目后，该项目的背景应更改如下- 我在CSS知识有限的情况下尝试了下面的代码，并且能够得到第一张图片中显示的内容。对于第二个图像，它显示如下，并且应该像在第二个图像中一样执行 HTML } 我使用bootstrap4发布我的答案，但这里的关键点与是否使用bootstrap3或bootstrap4无关。这里的关键点是如何制作三角形演示： CSS三角形我不打算在这里解释，因为已经很好地解释了：这里的想法是：

我的应用程序中有一个侧导航栏，由4个导航项组成。在初始荷载下，它们应如下所示-

单击每个项目后，该项目的背景应更改如下-

我在CSS知识有限的情况下尝试了下面的代码，并且能够得到第一张图片中显示的内容。对于第二个图像，它显示如下，并且应该像在第二个图像中一样执行

HTML

}

我使用bootstrap4发布我的答案，但这里的关键点与是否使用bootstrap3或bootstrap4无关。这里的关键点是如何制作三角形

演示：

CSS三角形我不打算在这里解释，因为已经很好地解释了：

这里的想法是：在激活导航链接之前，用白色背景制作一个三角形

计算

如果你想要三角形的顶端正好在菜单的中间，你需要计算它的总高度。< /P>

Total height = border top (1px) + 
               padding top (1rem) +
               line height (1.5 x 1rem = 1.5rem) +
               padding bottom (1rem) +
               border bottom (1px)

然后除以2表示顶部和底部边框的宽度。

我使用bootstrap4发布我的答案，但这里的关键点与是否使用bootstrap3或bootstrap4无关。这里的关键点是如何制作三角形

演示：

CSS三角形我不打算在这里解释，因为已经很好地解释了：

这里的想法是：在激活导航链接之前，用白色背景制作一个三角形

计算

如果你想要三角形的顶端正好在菜单的中间，你需要计算它的总高度。< /P>

Total height = border top (1px) + 
               padding top (1rem) +
               line height (1.5 x 1rem = 1.5rem) +
               padding bottom (1rem) +
               border bottom (1px)

然后除以2，得到顶部和底部边界的宽度

使用：：before和：：afterpseudo元素创建两个层，其高度等于父元素高度的50%。在这些层上应用背景、边界半径和其他必要的CSS属性。在悬停时使用skewX变换创建三角形效果。演示：

*，*：：之前，*：：之后{框大小：边框框；} 身体{ 背景：333urlhttps://k39.kn3.net/A01CCB6AE.jpg 不重复；背景尺寸：封面；高度：100vh；填充：10px；保证金：0； } .导航{ 字体系列：Arial，无衬线；列表样式：无；填充：0；保证金：0； } .nav li+li{ 利润上限：3倍； } 李娜先生{ 文字装饰：无；边界半径：2px；位置：相对位置；填充：12px 18px；溢出：隐藏；显示：块；颜色：000； } 李海军答：以前，李海军答：之后{ 过渡：变换。2s线性；变换原点：左上；背景色：DCDC；位置：绝对位置；不透明度：0.5；内容：；身高：50%； z指数：-1；右：0；左：0；排名：0； } 李海军答：之后{ 变换原点：左下角；顶部：自动；底部：0； } .nav li a:悬停：：之前{ 变换：倾斜x30度； } .导航李a:悬停：：之后{ 变换：X-30度； } 使用：：before和：：afterpseudo元素创建两个层，其高度等于父元素高度的50%。在这些层上应用背景、边界半径和其他必要的CSS属性。在悬停时使用skewX变换创建三角形效果。演示：

*{ 框大小：边框框 } 身体{ 宽度：100wh；高度：100vh；背景：线性梯度-45度，EE7752，E73C7E，23A6D5，23D5AB；背景大小：400%400%；动画：渐变15s轻松无限； } @关键帧渐变{ 0%，100%{背景位置：0%50%} 50%{背景位置：100%50%} } 菜单{ 利润率：40px自动；位置：相对位置；最大宽度：320px } 菜单里{ 位置：相对位置；列表样式：无；溢出：隐藏；底部边距：2倍 } 李：以前{ 内容：；位置：绝对位置；排名：0；左：0； z指数：-1；高度：40px；宽度：40px；不透明度：0；左边距：-30px；盒影：0px 0px 0px 480px d1e3ab；变换原点：中心；变换：旋转45度； } 菜单a{ 显示：块；文字装饰：无；颜色：5E5E；字体- 尺寸：14px；背景色：E1E1；填充：12px 10px；文本缩进：24px； } 菜单li：将鼠标悬停在a{ 背景色：透明； } 菜单li:悬停：在{ 不透明度：1 } 使用及

*{ 框大小：边框框 } 身体{ 宽度：100wh；高度：100vh；背景：线性梯度-45度，EE7752，E73C7E，23A6D5，23D5AB；背景大小：400%400%；动画：渐变15s轻松无限； } @关键帧渐变{ 0%，100%{背景位置：0%50%} 50%{背景位置：100%50%} } 菜单{ 利润率：40px自动；位置：相对位置；最大宽度：320px } 菜单里{ 位置：相对位置；列表样式：无；溢出：隐藏；底部边距：2倍 } 李：以前{ 内容：；位置：绝对位置；排名：0；左：0； z指数：-1；高度：40px；宽度：40px；不透明度：0；左边距：-30px；盒影：0px 0px 0px 480px d1e3ab；变换原点：中心；变换：旋转45度； } 菜单a{ 显示：块；文字装饰：无；颜色：5E5E；字体大小：14px；背景色：E1E1；填充：12px 10px；文本缩进：24px； } 菜单li：将鼠标悬停在a{ 背景色：透明； } 菜单li:悬停：在{ 不透明度：1 }

为什么这个标签是bootstrap-4。。不再有导航堆叠类了？@ZimSystem，谢谢并删除了引导标签。。我将检查导航堆叠类。我了解创建垂直导航的flex column类。这里还可以使用什么？为什么这个标记为bootstrap-4.的潜在副本。。不再有导航堆叠类了？@ZimSystem，谢谢并删除了引导标签。。我将检查导航堆叠类。我了解创建垂直导航的flex column类。这里还能用什么？谢谢你的潜在副本。我尝试过这种方法，由于某种原因，我的项目没有堆叠，显示为项目1、项目2、项目3和项目4重叠。正如我在开始时所说，我使用的是bootstrap4，而您使用的是bootstrap3。他们之间有很多零钱。好的，明白了。将尝试解决此问题并查看输出。谢谢。我尝试过这种方法，由于某种原因，我的项目没有堆叠，显示为项目1、项目2、项目3和项目4重叠。正如我在开始时所说，我使用的是bootstrap4，而您使用的是bootstrap3。他们之间有很多零钱。好的，明白了。将尝试解决问题并查看输出。太好了，当您将鼠标悬停在项目1和项目4上时，会出现一条白线。有没有办法解决这个问题？ChilBud在我的chrome浏览器中运行良好。您在哪个浏览器和版本中遇到此问题？Chrome和版本66.0.3359.139官方版本64-bit@ChilBud我有Chrom版本67.0.3396.99官方版本64位，在那里工作正常。请更新您的浏览器。希望这个问题能得到解决。太好了，当你停留在项目1和项目4上时，会出现一条白线。有没有办法解决这个问题？ChilBud在我的chrome浏览器中运行良好。您在哪个浏览器和版本中遇到此问题？Chrome和版本66.0.3359.139官方版本64-bit@ChilBud我有Chrom版本67.0.3396.99官方版本64位，在那里工作正常。请更新您的浏览器。希望这个问题能得到解决。我想更改为基于单击的ribbon，而不是悬停，所以更改为悬停到焦点，不起作用。为什么要尝试聚焦列表元素？如果你尝试点击，你可能会考虑使用JavaScript点击事件或者将结构更改为输入和复选框。我想基于点击而不是悬停来更改为色带，这样就变成了悬停焦点而不起作用。为什么要关注列表元素？如果您尝试单击，您可以考虑使用JavaScript单击事件或将结构更改为输入和复选框。

Total height = border top (1px) + 
               padding top (1rem) +
               line height (1.5 x 1rem = 1.5rem) +
               padding bottom (1rem) +
               border bottom (1px)