标签: nav

我一直在玩Bootstrap一段时间.虽然我一直都能使一切运转起来.我一直在考虑一个即将推出的项目,它需要一个附加的侧导航器,就像Twitter Bootstrap doc中的那个一样.

我甚至试图将这些类包含在我的元素中.

<ul class="nav nav-list affix-top">

这里的任何引导程序都可以帮助我弄清楚我需要添加什么来实现这些功能.此外,我一直无法让人字形显示与那里完全一样,我的人字形总是与文本一起被捣碎.

此按钮触发下一个选项卡以加载内容,但选项卡本身不切换,它仍保留在第一个选项卡上.

<br><a class="btn btn-primary" href="#tab2" data-toggle="tab">Review</a><br>

以下是nav nav-tabs的代码:

  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
  </ul>

用于切换标签和内容的任何解决方案均为 APPRECIATED

..也许是一种更改按钮以触发next()*bootstrap-tab.js v2.3.1中的功能的方法:

  , activate: function ( element, container, callback) {
      var $active = container.find('> .active')
        , transition = callback
            && $.support.transition
            && $active.hasClass('fade')

      function next() {
        $active
          .removeClass('active')
          .find('> .dropdown-menu > .active')
          .removeClass('active')

        element.addClass('active')

        if (transition) {
          element[0].offsetWidth // reflow for transition
          element.addClass('in')
        } else {
          element.removeClass('fade')
        }

        if ( element.parent('.dropdown-menu') ) …

我网站上的顶部栏导航左对齐,如下所示:

| Home | aveoTSD | Silent Nite          |

我想像这样中心顶部栏导航:

|          Home | aveoTSD | Silent Nite          |

使其与"示例"文本的红色条完全相同.

这是我的CSS.

这是由以下原因引起的：“ 由以下原因引起：android.view.InflateException：com.example.dnaire:layout/main 中的二进制 XML 文件第 21 行：com.example.dnaire:layout/main 中的二进制 XML 文件第 21 行：膨胀类 androidx.fragment.app.FragmentContainerView 时出错，原因是：android.view.InflateException：com.example.dnaire 中的二进制 XML 文件第 21 行：layout/main：膨胀类 androidx.fragment.app.FragmentContainerView 时出错，原因是：java .lang.reflect.InitationTargetException”

我的项目还没有太多代码，刚刚开始。

这是主要活动：

class Main : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val mainBinding = MainBinding.inflate(layoutInflater)
        setContentView(mainBinding.root)
    }
}

这是包含导致问题的 FragmentContainerView 的 main.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Main">

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

那是 nav_graph.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android" …

简单直截了当的问题,但其中一个我找不到任何建议.

支持的适当的HTML5值包括:

• 作者
• 第一
• 持续
• 下一个
• 上一页
• 救命
• 许可证(不是"许可证")

例

导航包括索引,关于,联系和合法

..从index.html页面的角度来看:

• index.html with rel ="first"
• about.html with rel = author next"
• contact.html with rel ="help"
• legal.html with rel ="license last"

...从contact.html页面的角度来看:

• index.html with rel ="first"
• about.html with rel = author prev"
• contact.html with rel ="help"
• legal.html with rel ="license next last"

我接受在导航中使用rel将实现很少; 但它可能会以某种小的方式帮助搜索引擎.

我举了两个例子来说明这在实践和评论中是如何运作的!

亲切的问候,戴尔

编辑以下评论中的示例

导航包括索引,关于,联系和合法

..从index.html页面的角度来看:

• index.html没有rel
• about.html with rel = author"
• contact.html with rel ="help"
• legal.html with rel ="license"

...从contact.html页面的角度来看:

• index.html没有rel
• about.html with rel = author" …

我之前正在处理打印样式表,并遇到了IE8的问题.我正在使用HTML5和几个布局标签,包括标题,导航和页脚.

出于某种原因,在我的打印样式表中,display:none; 在IE8中忽略了这些标签上的声明(我只能假设后续的较低版本).我首先想到IE9中的Developer Tools可能会导致错误表示,但我在VirtualBox中安装了Windows XP,这也显示了问题.

我的猜测是因为IE9以下的任何东西都看不到HTML5标签.打印样式表隐藏了Firefox和Chrome中的布局标签.

反正有没有绕过这个？

编辑:

这就是我现在所拥有的:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/print.css" type="text/css" media="print" />

忽略PHP语句,它们特定于我的CMS,即WordPress.

然后我只是在print.css中隐藏布局标签:

nav,footer { 
display:none;
}

这适用于IE9,Firefox,Chrome但不低于IE9.它似乎忽略了HTML5标签.

我正在尝试创建此导航菜单(绿色突出显示是活动页面,灰色是悬停状态):

我可以使用以下CSS制作平行四边形:

ul#nav li a {
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
    transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    color:#757575;
}

ul#nav li a:hover {
    background:#f3f1eb;
}

ul#nav li a.current-menu-item {
    color:#fff;
    background:#5d9732;
}

ul#nav li a.current-menu-item:hover {
    background:#5d9732;
}

不幸的是,这会导致文本偏斜,显示为斜体:

这里是一个显示设置的jsfiddle(虽然偏斜在jsfiddle中不起作用):http://jsfiddle.net/K3bQJ/4/

有没有办法防止文本的歪斜,所以它不显示斜体？我正在加载jQuery但更愿意避免它或者至少有一个可用的CSS回退.

谢谢你的建议!

我正在编写一个多语言网站,我有以下导航:

 <nav id="language">
    <ul>
      <li><a href="/en/" hreflang="en">en</a></li>
      <li><a href="/de/" hreflang="de">de</a></li>
      <li>fr</li>
    </ul>
    </nav>

我可以改进语义吗？使用微数据或标签属性,例如

我正在尝试在用户向下滚动时向网站的导航栏添加粘性导航栏效果。即当浏览器向下滚动一定高度时，我希望导航栏固定在页面顶部

我正在尝试用反应钩子来实现这个。这是导航栏的代码

导航栏.js

   import { useEffect, useState } from "react";

    const NavBar = () => {
    // sticky nav
    const [stickyClass, setStickyClass] = useState("");

    function stickNavbar() {
        let windowHeight = window.scrollY;
        setStickyClass("sticky-nav") ? windowHeight > 500 : setStickyClass("");
    }

    useEffect(() => {
        window.addEventListener("scroll", stickNavbar);
    }, []);

return (
        <nav className="relative w-full p-4">
            <div className={`flex w-full flex-row items-center justify-between ${stickyClass}`}>
             navbar content goes here ....
            <div/>
<nav/>

我使用 tailwindcss 进行样式设置，因此没有外部样式表，但是该类sticky-nav应用了 tailwindcss 的一些实用程序类。

组件.css

/* Navbar */
.sticky-nav {
    @apply …

我现在正在整理我的博客 - 其中包括一个标签云,允许人们按主题浏览

我正在考虑将标签云链接包装在<nav>标签中,因为这些是技术上的导航链接.

别人怎么想？