javascript - 如何更改此导航栏中 Logo 的位置？

标签 javascript html css

好的，我有这个模板。但我无法弄清楚如何将 Logo 的位置向左移动并相应地移动菜单。我还想将背景颜色更改为白色。我可以自己完成其余的更改。

$(document).ready(function() {
  /* MAIN MENU */
  $('#main-menu > li:has(ul.sub-menu)').addClass('parent');
  $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');

  $('#menu-toggle').click(function() {
    $('#main-menu').slideToggle(300);
    return false;
  });

  $(window).resize(function() {
    if ($(window).width() > 700) {
      $('#main-menu').removeAttr('style');
    }
  });
});
a {
  color: #23dbdb;
  text-decoration: none;
}

a:hover {
  color: #000;
}

ol, ul {
  list-style: none;
  padding:0px;
  margin:0px;
}

#wrap {
  margin: 0 auto;
}

.inner {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 40px;
}

.relative {
  position: relative;
}

.right {
  float: right;
}

.left {
  float: left;
}

/* HEADER */
#wrap > header {
  background-color: #333;
  padding-bottom: 20px;
}

.logo {
  display: inline-block;
  font-size: 0;
  padding-top: 15px;
}

#navigation {
  position: absolute;
  right: 40px;
  bottom: 0px;
}

#menu-toggle {
  display: none;
  float: right;
}

/* HEADER > MENU */
#main-menu {
  float: right;
  font-size: 0;
  margin: 10px 0;
}

#main-menu > li {
  display: inline-block;
  margin-left: 30px;
  padding: 2px 0;
}

#main-menu > li.parent {
  background-image: url(../images/plus-gray.png);
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position: left center;
}

#main-menu > li.parent > a {
  padding-left: 14px;
}

#main-menu > li > a {
  color: #eee;
  font-size: 14px;
  line-height: 14px;
  padding: 30px 0;
  text-decoration: none;
}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
  color: #23dbdb;
}

/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}

ul.sub-menu { /* level 2 */
  display: none;
  left: 0px;
  top: 38px;
  padding-top: 10px;
  position: absolute;
  width: 150px;
  z-index: 9999;
}

ul.sub-menu ul.sub-menu { /* level 3+ */
  margin-top: -1px;
  padding-top: 0;
  left: 149px;
  top: 0px;
}

ul.sub-menu > li > a {
  background-color: #333;
  border: 1px solid #444;
  border-top: none;
  color: #bbb;
  display: block;
  font-size: 12px;
  line-height: 15px;
  padding: 10px 12px;
}

ul.sub-menu > li > a:hover {
  background-color: #2a2a2a; 
  color: #fff;
}

ul.sub-menu > li:first-child {
  border-top: 3px solid #23dbdb;
}

ul.sub-menu ul.sub-menu > li:first-child {
  border-top: 1px solid #444;
}

ul.sub-menu > li:last-child > a {
  border-radius: 0 0 2px 2px;
}

ul.sub-menu > li > a.parent {
  background-image: url(../images/arrow.png);
  background-size: 5px 9px;
  background-repeat: no-repeat;
  background-position: 95% center;
}

#main-menu li:hover > ul.sub-menu {
  display: block; /* show the submenu */
}

The CSS Responsive Style
@media all and (max-width: 700px) {
  #navigation {
    position: static;
    margin-top: 20px;
  }

  #menu-toggle {
    display: block;
  }

  #main-menu {
    display: none;
    float: none;
  }

  #main-menu li {
    display: block;
    margin: 0;
    padding: 0;
  }

  #main-menu > li {
    margin-top: -1px;
  }

  #main-menu > li:first-child {
    margin-top: 0;
  }

  #main-menu > li > a {
    background-color: #333;
    border: 1px solid #444;
    color: #bbb;
    display: block;
    font-size: 14px;
    padding: 12px !important;
    padding: 0;
  }

  #main-menu li > a:hover {
    background-color: #444; 
  }

  #main-menu > li.parent {
    background: none !important;
    padding: 0;
  }

  #main-menu > li:hover > a,
  #main-menu > li.current-menu-item > a {
    border: 1px solid #444 !important;
    color: #fff !important;
  }

  ul.sub-menu {
    display: block;
    margin-top: -1px;
    margin-left: 20px;
    position: static;
    padding: 0;
    width: inherit;
  }

  ul.sub-menu > li:first-child {
    border-top: 1px solid #444 !important;
  }

  ul.sub-menu > li > a.parent {
    background: #333 !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrap">
  <header>
    <div class="inner relative">
      <a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
      <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
      <nav id="navigation">
        <ul id="main-menu">
          <li class="current-menu-item"><a href="https://www.freshdesignweb.com">Home</a></li>
          <li class="parent">
            <a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Features</a>
            <ul class="sub-menu">
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/"><i class="icon-wrench"></i> Elements</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/"><i class="icon-credit-card"></i>  Pricing Tables</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/"><i class="icon-gift"></i> Icons</a></li>
              <li>
                <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
                <ul class="sub-menu">
                  <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Full Width</a></li>
                  <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Left Sidebar</a></li>
                  <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Right Sidebar</a></li>
                  <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Double Sidebar</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Portfolio</a></li>
          <li class="parent">
            <a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Blog</a>
            <ul class="sub-menu">
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Large Image</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Medium Image</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Masonry</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Double Sidebar</a></li>
              <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Single Post</a></li>
            </ul>
          </li>
          <li><a href="https://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol/">Contact</a></li>
        </ul>
      </nav>
      <div class="clear"></div>
    </div>
  </header>   
</div>

最佳答案

首先，您必须将 web View 更改为导航左侧位置的 CSS 代码。如果您想将 Logo 放在左侧位置，还应删除 Logo ，否则 Logo 和菜单会重叠。 

#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}

您还想更改菜单栏背景颜色，然后更改为此 css 代码

#wrap > header {
    background-color: #fff;
}

注意:如果你这样做，你应该将你的菜单字体颜色更改为黑色，否则你的字体菜单字体颜色和菜单背景颜色看起来很乱。

关于javascript - 如何更改此导航栏中 Logo 的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47130043/

上一篇：html - 防止下拉菜单在没有 JavaScript 的情况下隐藏

下一篇：javascript - 勾选以在按钮上显示按钮并在单击时降低其不透明度

相关文章：

javascript - 嵌入谷歌地图

javascript - 单击后将div重置为原始位置

html - CSS - 在没有重叠/绝对定位的情况下将元素对齐到居中的 div 的右侧？

javascript - 实时更新内容/jquery 的动画高度

javascript - AJAX/ Spring MVC : JSON Object rendering in bracket notation in POST request

javascript - 动态生成的输入框调整大小并刷新位置和大小

html - 如何使动画 Sprite (带有行和列)在 Firefox 中工作？

css - 具有绝对定位和高度的 svg 在 Chrome 中行为不端

css - CSS 中的波浪边框

javascript - 无法使用 Angular 2 执行登录验证

©2024 IT工具网  联系我们