导航栏的方式类似于附加的导航栏

时间：2015-11-12 02:47:08

标签： javascript jquery html css css3

我正在尝试将此导航栏设置为此图像的样式：

enter image description here

目前我有这个：

https://jsfiddle.net/jd3tgzme/1/ 

<!-- Custom CSS -->
<style>
  .alphabetNav li {
    text-decoration: none;
    cursor: pointer;
    float: left;
    display: inline;
    list-style: none;
    background-color: #cecece;
    padding: 3px;
    margin: 2px;
  }
  .noNav li {
    text-decoration: none;
    cursor: pointer;
    float: left;
    display: inline;
    list-style: none;
    color: #FFFFFF;
    background-color: #000000;
    padding: 3px;
    margin: 2px;
  }
  .letter:hover {
    color: red;
  }
  .letter:visited {
    background-color: red;
  }
  .submenuDiv ul {
    display: inline;
  }
  .submenuDiv ul li {
    float: left;
    list-style: none;
    padding: 5px;
    margin: 10px;
    background-color: #cecece;
    border: solid 1px black;
    border-radius: 10px;
    font-size: 12px;
  }
  .submenuDiv {
    display: none;
  }
</style>
<!-- JS -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
  $(document).ready(function() {

    $(".letter").click(function(e) {
      var letter = $(this).html().trim();
      $(".submenuDiv").hide();
      x = e.clientX - 100;
      pos = $(this).position();
      y = pos.top + 50;
      $("#div" + letter).css({
        left: x,
        top: y,
        position: 'absolute'
      });
      $("#div" + letter).show();

    });
  });
</script>
</head>

<body>
  <ul class='alphabetNav'>
    <li><a class='letter' id='letterA'>A</a>
    </li>
    <li><a class='letter' id='letterB'>B</a>
    </li>
    <li><a class='letter' id='letterC'>C</a>
    </li>
    <ul class='noNav'>
      <li>D</li>
    </ul>
    <li><a class='letter' id='letterE'>E</a>
    </li>
    <ul class='noNav'>
      <li>F</li>
    </ul>
    <li><a class='letter' id='letterG'>G</a>
    </li>
    <li><a class='letter' id='letterH'>H</a>
    </li>
    <ul class='noNav'>
      <li>I</li>
    </ul>
    <ul class='noNav'>
      <li>J</li>
    </ul>
    <li><a class='letter' id='letterK'>K</a>
    </li>
    <li><a class='letter' id='letterL'>L</a>
    </li>
    <li><a class='letter' id='letterM'>M</a>
    </li>
    <ul class='noNav'>
      <li>N</li>
    </ul>
    <li><a class='letter' id='letterO'>O</a>
    </li>
    <li><a class='letter' id='letterP'>P</a>
    </li>
    <li><a class='letter' id='letterQ'>Q</a>
    </li>
    <li><a class='letter' id='letterR'>R</a>
    </li>
    <li><a class='letter' id='letterS'>S</a>
    </li>
    <li><a class='letter' id='letterT'>T</a>
    </li>
    <ul class='noNav'>
      <li>U</li>
    </ul>
    <li><a class='letter' id='letterV'>V</a>
    </li>
    <li><a class='letter' id='letterW'>W</a>
    </li>
    <li><a class='letter' id='letterX'>X</a>
    </li>
    <li><a class='letter' id='letterY'>Y</a>
    </li>
    <li><a class='letter' id='letterY'>Z</a>
    </li>
  </ul>

  <!-- Submenu for letter A -->
  <div class='submenuDiv' id='divA'>
    <ul>
      <li>
        Abbotsford-Mission (B.C.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter B -->
  <div class='submenuDiv' id='divB'>
    <ul>
      <li>
        Barrie (Ont.)
      </li>
      <li>
        Brantford (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter C -->
  <div class='submenuDiv' id='divC'>
    <ul>
      <li>
        Calgary (Alta.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter D -->
  <div class='submenuDiv' id='divD'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter E -->
  <div class='submenuDiv' id='divE'>
    <ul>
      <li>
        Edmonton (Alta.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter F -->
  <div class='submenuDiv' id='divF'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter G -->
  <div class='submenuDiv' id='divG'>
    <ul>
      <li>
        Greater Sudbury (Ont.)
      </li>
      <li>
        Guelph (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter H -->
  <div class='submenuDiv' id='divH'>
    <ul>
      <li>
        Halifax (N.S.)
      </li>
      <li>
        Hamilton (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter I -->
  <div class='submenuDiv' id='divI'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter J -->
  <div class='submenuDiv' id='divJ'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter K -->
  <div class='submenuDiv' id='divK'>
    <ul>
      <li>
        Kelowna (B.C.)
      </li>
      <li>
        Kingston (Ont.)
      </li>
      <li>
        Kitchener-Cambridge-Waterloo (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter L -->
  <div class='submenuDiv' id='divL'>
    <ul>
      <li>
        London (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter M -->
  <div class='submenuDiv' id='divM'>
    <ul>
      <li>
        Moncton (N.B.)
      </li>
      <li>
        Montréal (Que.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter N -->
  <div class='submenuDiv' id='divN'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter O -->
  <div class='submenuDiv' id='divO'>
    <ul>
      <li>
        Oshawa (Ont.)
      </li>
      <li>
        Ottawa-Gatineau (Ont.-Que.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter P -->
  <div class='submenuDiv' id='divP'>
    <ul>
      <li>
        Peterborough (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter Q -->
  <div class='submenuDiv' id='divQ'>
    <ul>
      <li>
        Québec (Que.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter R -->
  <div class='submenuDiv' id='divR'>
    <ul>
      <li>
        Regina (Sask.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter S -->
  <div class='submenuDiv' id='divS'>
    <ul>
      <li>
        Saguenay (Que.)
      </li>
      <li>
        Saint John (N.B.)
      </li>
      <li>
        Saskatoon (Sask.)
      </li>
      <li>
        Sherbrooke (Que.)
      </li>
      <li>
        St. Catharines-Niagara (Ont.)
      </li>
      <li>
        St. John's (N.L.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter T -->
  <div class='submenuDiv' id='divT'>
    <ul>
      <li>
        Thunder Bay (Ont.)
      </li>
      <li>
        Toronto (Ont.)
      </li>
      <li>
        Trois-Rivières (Que.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter U -->
  <div class='submenuDiv' id='divU'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter V -->
  <div class='submenuDiv' id='divV'>
    <ul>
      <li>
        Vancouver (B.C.)
      </li>
      <li>
        Victoria (B.C.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter W -->
  <div class='submenuDiv' id='divW'>
    <ul>
      <li>
        Windsor (Ont.)
      </li>
      <li>
        Winnipeg (Man.)
      </li>
    </ul>
  </div>

</body>

我只是想知道如何设计它以便'D，F，I，J，N，U，X，Y，＆amp; Z'可以变灰并且不可点击。我还想知道如何获得灰色背景，当它点击一个字母时，背景填充白色（如图中的M）。非常感谢任何和所有的帮助！

谢谢！

3 个答案:

答案 0 :(得分：1)

将此添加到您的CSS 

.noNav{
    color:#aaa;
}

https://jsfiddle.net/jd3tgzme/2/

对于活跃的LI：https://jsfiddle.net/jd3tgzme/3/
 添加CSS：

.alphabetNav li.active{
    background-color:#fafafa;
}

并在jQuery中：

    e.preventDefault();
    $(".letter").closest("li").removeClass("active");
    $(this).closest("li").addClass("active");

答案 1 :(得分：0)

1-要使不可点击的字母变灰，您可以使用此CSS：

this.setState({})

2-要在导航中添加灰色背景，您需要为.noNav li { cursor:default; color:#ccc } 和背景设置一个高度：

alphabetNav

3-要修改被点击元素的样式，您需要在点击功能中添加以下内容：

.alphabetNav {
    width:550px;
    height:27px
}

4-要为点击的元素设置样式，您需要在css中添加类似的内容：

$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');

5-要添加圆角，您需要在css中使用li.current { background:#fff } ，如下所示：

border-radius

您可以看到更新的fiddle

答案 2 :(得分：0)

https://jsfiddle.net/jd3tgzme/9/ 

.noNav {
   background-color: #aaa;
}
.active {
   background-color: white!important;
}
$("#letter"+letter).parent().addClass('clicked')

我在这里执行以下操作：

  • 我将.noNav类的颜色更改为灰色
  • 我添加了一个名为.active的类，它将父元素背景（Li）变为白色，您可以更改颜色以匹配导航栏下方内容包装器的所选背景（在本例中为白色），并将其混合为
  • 我将边框半径添加到.alphabetNav的li的顶角以使边缘变圆

由您决定：

  • 在点击新信件时，从之前点击的字母中删除.active。应该很简单。

P.S：＆＃34;！important＆＃34;在＆＃39; white＆＃39;基本上意味着浏览器应该忽略适用于同一对象的任何其他设置。 （覆盖）

干杯！

相关问题
最新问题