CSS 水平导航栏

水平导航栏

有两种创建水平导航栏的方法：使用行内یا浮动列表项。

行内列表项

构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将

  • 元素指定为 inline：

    ਉਦਾਹਰਣ

    li {
  display: inline;
}

    ذاتی طور پر کوشش کریجئے

    例子解释：

    display: inline; -默认情况下，

  • 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

    • 浮动列表项

    创建水平导航栏的另一种方法是浮动

  • 元素，并为导航链接规定布局：

    ਉਦਾਹਰਣ

    li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

    ذاتی طور پر کوشش کریجئے

    例子解释：

    • float: left; - 使用 float 使块元素滑动为彼此相邻
    • display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
    • padding: 8px; - ਬਲਕ ਐਲੀਮੈਂਟ ਨੂੰ ਸੁੰਦਰ ਬਣਾਓ
    • background-color: #dddddd; - ਹਰ ਐਲੀਮੈਂਟ ਲਈ ਗ੍ਰੇ ਬੈਕਗਰਾਊਂਡ ਕਾਲਰ ਜੋੜੋ

    ਸੁਝਾਅ:ਜੇਕਰ ਪੂਰੀ ਚੌੜਾਈ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਾਲਰ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ background-color ਨੂੰ <ul> ਵਿੱਚ ਨਾ ਹੀ ਹਰ ਏ <a> ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜੋ:

    ਉਦਾਹਰਣ

    ul {
  background-color: #dddddd;
}

    ذاتی طور پر کوشش کریجئے

    • ਹਰੀਟਾਲ ਨੇਵੀਗੇਸ਼ਨ ਇੰਸਟੈਂਸ

    ਮੰਗਨ ਕਰੋ ਕਿ ਮੂਲ ਨੇਵੀਗੇਸ਼ਨ ਬੈਕਗਰਾਊਂਡ ਕਾਲਰ ਗਹਿਰਾ ਹੋਵੇ ਅਤੇ ਜਦੋਂ ਯੂਜ਼ਰ ਲਿੰਕ ਉੱਤੇ ਮਾਉਸ ਲਗਾਵੇ ਤਾਂ ਲਿੰਕ ਬੈਕਗਰਾਊਂਡ ਕਾਲਰ ਬਦਲੇ:

    ਉਦਾਹਰਣ

    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ਮਾਉਸ ਹੋਵੇਂ ਤੱਕ ਲਿੰਕ ਰੰਗ ਨੂੰ #111 (ਕਾਲਾ) ਵਿੱਚ ਬਦਲ ਦੇਣਾ */
li a:hover {
  background-color: #111;
}

    ذاتی طور پر کوشش کریجئے

    ਸਰਗਰਮ / ਮੌਜੂਦਾ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ

    ਮੌਜੂਦਾ ਲਿੰਕ ਵਿੱਚ 'active' ਕਲਾਸ ਜੋੜ ਦੇਣਾ ਹੈ ਤਾਕਿ ਉਪਭੋਗਤਾ ਜਾਣ ਸਕੇ ਕਿ ਉਹ ਕਿਸ ਪੰਨੇ 'ਤੇ ਹੈ:

    ਉਦਾਹਰਣ

    .active {
  background-color: #4CAF50;
}

    ذاتی طور پر کوشش کریجئے

    ਦਾਹਿਨੀ ਸਮਾਂਤਰ ਲਿੰਕ

    ਲਿਸਟ ਆਈਟਮ ਨੂੰ ਦਾਹਿਨੀ ਮੋਡ ਵਿੱਚ ਫਲੌਟ ਕਰ ਕੇ ਲਿੰਕ ਨੂੰ ਦਾਹਿਨੀ ਸਮਾਂਤਰ ਕਰਨਾ ਹੈ (float:right;）：

    ਉਦਾਹਰਣ

    <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

    ذاتی طور پر کوشش کریجئے

    ਬਰੇਡਰ ਵੱਖਰੀ ਜੋੜੀ

    ਬਰੇਡਰ ਜੋੜੀ ਜਾਵੇ border-right ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਲੋਕੇਸ਼ਨ ਦੇ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ

    ਉਦਾਹਰਣ

    /* ਸਾਰੇ ਲਿਸਟ ਆਈਟਮਾਂ 'ਤੇ ਕਾਲੇ ਰੰਗ ਦੀ ਪਟੜੀ ਜੋੜੀ ਜਾਵੇ, ਅੰਤਿਮ ਆਈਟਮ (last-child) ਛੱਡ ਕੇ */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

    ذاتی طور پر کوشش کریجئے

    ਫਿਕਸਡ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

    ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਪੰਜੀਕਰਨ ਦੇ ਮੋਡ ਵਿੱਚ ਰੱਖਣਾ ਹੈ, ਬੇਸ਼ਕ ਉਸ ਵਿੱਚ ਸਰੋਲ ਕਰਨ ਨਾਲ ਵੀ:

    ਉੱਪਰ 'ਤੇ ਫਿਕਸਡ

    ul {
  position: fixed;
  اوپر: 0;
  width: 100%;
}

    ذاتی طور پر کوشش کریجئے

    ਤਲ 'ਤੇ ਫਿਕਸਡ

    ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

    ذاتی طور پر کوشش کریجئے

    تذکرہ:ਫਿਕਸਡ ਲੋਕੇਸ਼ਨ ਮੋਬਾਇਲ ਉਪਕਰਣਾਂ 'ਤੇ ਸਹੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ。

    ਕਾਲੇ ਰੰਗ ਦਾ ਸਟੀਕੀ ਹਰੀਜ਼ਨਟਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

    ਕਾਲੇ ਰੰਗ ਦੇ ਸਟੀਕੀ ਹਰੀਜ਼ਨਟਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਦਾ ਉਦਾਹਰਣ

    ਉਦਾਹਰਣ

    ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

    ذاتی طور پر کوشش کریجئے

    ਸਟੀਕੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

    ਸਟੀਕੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ پوزیشن: چسپ;ਸਟੀਕੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਉਣ ਲਈ。

    ਸਟੀਕੀ ਐਲੀਮੈਂਟ ਸਰੋਲ ਸਥਿਤੀ ਦੇ ਹਿਸਾਬ ਨਾਲ ਰਿਲੇਟਿਵ ਅਤੇ ਫਿਕਸਡ ਵਿੱਚ ਟ੍ਰਾਂਸਫਾਰਮ ਕਰਦਾ ਹੈ। ਇਹ ਰਿਲੇਟਿਵ ਲੋਕੇਸ਼ਨ ਵਿੱਚ ਹੈ, ਜਦੋਂ ਤੱਕ ਇਹ ਵਿਜ਼ੂਅਲ ਵਿੱਚ ਦਿੱਤੇ ਹੋਏ ਆਫਸੈਟ ਸਥਾਨ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ - ਤਦ ਇਸਨੂੰ ਉਚਿਤ ਸਥਾਨ 'ਤੇ 'ਸਟੀਕੀ' ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ (ਉਦਾਹਰਣ ਵਜੋਂ position:fixed)。

    ਉਦਾਹਰਣ

    ul {
  پوزیشن: -webkit-chsپ; /* سافری */
  پوزیشن: چسپ;
  اوپر: 0;
}

    ذاتی طور پر کوشش کریجئے

    تذکرہ:اینٹرنٹ ایکسپلورر، ایج 15 اور اس سے پہلے کی نسلیں چسپ پوزیشن کو نہیں استعمال کرسکتی ہیں۔ سافری کو -webkit- پیشوند ضروری ہوتا ہے (مثال دیکھیجئے)۔ آپ کو اور یقینی طور پر، اوپر،دائیں،نیچل یا بائیں کم سے کم ایک، تاکہ چسپ پوزیشن کا اثر آئے

    بھی ترتیب درج نمائش

    مستعد اوپر ناویگیشن
    چگونه CSS میڈیا کوئری استعمال کرتے ہوئے مستعد اوپر ناویگیشن بنایاجاتا ہے。
    مستعد باہری ناویگیشن
    چگونه CSS میڈیا کوئری استعمال کرتے ہوئے مستعد باہری ناویگیشن بنایاجاتا ہے。
    ڈاؤن وائی ناویگیشن بار
    چگونه ناویگیشن بار میں ڈاؤن وائی لسٹ شامل کیاجاتا ہے。