خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

HTML and CSS problem

I have two problems I can't fix, the first in the desktop mode, on navbar work submenu, I tried to make columns, I tried something, but that's not what I need,and I don't know how to fix it.

The second problem is in mobile mode, the logo: how do I position it so that it will be on the same line with the hamburger icon?

I'd love someone to help.

Code:
<body dir="rtl">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <nav>
    <div class="menu-icon">
      <i class="fa fa-bars fa-2x"></i>
    </div>
    <ul>
      <li class="logo">
        <a href="#"><img src="img/logo.png" width="70px" heidth="50px"></a>
      </li>
      <li><a href="#">home</a></li>
      <li><a href="#">work</a>
        <ul class="menu-col-1">
          <h3>category</h3>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <h3>category</h3>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
        </ul>
      </li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>

  </nav>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
Code:
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

nav li.logo:hover {
  background-color: transparent;
}

ul {
  margin: 0;
  padding: 0;
  background-color: #00695c;
  list-style-type: none;
  position: relative;
  text-align: center;
}

ul li {
  display: inline-block;
}

ul li a {
  color: #fff;
  text-decoration: none;
  padding: 15px;
  margin: 0px;
  display: block;
}

ul li:hover {
  background-color: #00897b;
}

ul li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  background-color: #00897b;
  right: 720px;
}

ul ul li {
  display: block;
  background-color: #00897b;
  width: 25%;
  float: right;
}

ul ul li:hover {
  background-color: #26a69a;
}

nav div {
  display: none;
  background-color: #000;
  color: #fff;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 480px) {
  nav div {
    display: block;
  }
  ul {
    display: none;
    position: static;
    padding-top: 5px;
  }
  h3 {
    margin: 0;
  }
  ul li {
    display: block;
    border-bottom: 1px solid #014f45;
    text-align: center;
  }
  ul ul {
    position: static;
    background-color: #4db6ac;
    width: 100%;
  }
  ul ul li {
    background-color: #4db6ac;
    border-radius: 0;
    width: 100%;
  }
}
Code:
$(window).resize(function() {
  if ($(window).width() > 480) {
    $("ul").removeAttr('style');
  };
});

$("nav div").click(function() {
  $("ul").slideToggle();
  $("ul ul.menu-col-1").css("display", "none");
});

$("ul li").click(function() {
  $("ul ul .menu-col-1").slideUp();
  $(this).find('ul').slideToggle();
});

برچسب: نویسنده: آیلین رضوانی تاريخ: دوشنبه 27 آذر 1396 ساعت: 7:55

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه