Как добавить в левой части этого верхнего навигационного меню текстовый логотип?

ProgramBox

Как добавить в левой части этого верхнего навигационного меню текстовый логотип?

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#html #css #menu #responsive-design #responsive

#HTML #css #меню #адаптивный дизайн #отзывчивый #адаптивный

Вопрос:

Я пытаюсь изменить верхнее навигационное адаптивное меню w3c, чтобы поместить в его левую часть текстовый логотип (напр. Mylogo) но я не знаю, почему мои знания настолько плохи в отзывчивости, поэтому, пожалуйста, кто-нибудь может показать мне, как это сделать?

Я хочу, чтобы текстовый логотип (слово) находился в левой части меню, а в правой части были размещены текстовые ссылки меню.

Вот полный код :

 function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className  = " responsive";
  } else {
    x.className = "topnav";
  }
}

 body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

 <ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

1. Добавьте изображение перед .topnav и переместите его влево. Установите это изображение на display: block; max-width: 100%; height: auto; .

2. хм, но я хочу добавить не изображение, а текстовое слово, например, MyLogo

3. Вы сказали текстовый логотип, поэтому я предположил, что это будет изображение. Поэтому разместите <div> или <p> с текстом в нем слева от .topnav с аналогичными атрибутами для вашей навигации, так что это та же высота строки и т.д. Разве вы сами не написали приведенный выше код? Кажется, если бы у вас было, вам не нужно было бы задавать этот вопрос.

4. @erapen простым способом вы можете добавить эту строку перед тегом li, который содержит home <li class=»logo»><a href=»#»>Мой логотип</a></li>, так что это будет вместо home.. И если вы устанавливаете текст перед тегом ul, вы должны установить позицию для этого.

Ответ №1:

Добавьте элемент перед навигацией и переместите его.

В своем ответе я заключил текстовый логотип и навигацию в <header> элемент и переместил цвет фона с <ul> на <header> . Я также воспроизвел некоторые стили, используемые навигацией (т. Е. отступы) на текстовом логотипе для целей позиционирования и стилизации.

 function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className  = " responsive";
  } else {
    x.className = "topnav";
  }
}

 body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
.primary-nav {
  background-color: #333;
}
.text-logo {
  float: left;
  padding: 14px 16px;
  font-size: 17px;
  color: #fc0;
}

 <header class="primary-nav">
  <div class="text-logo">My Logo</div>
  <ul class="topnav" id="myTopnav">
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
    </li>
  </ul>
</header>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

Ответ №2:

Это всего лишь пример. Я комментирую в своем css (span.logo amp; ul.topnav li a:nth (1)), где у меня есть изменения. Вы можете сделать его более красивым, когда узнаете больше о. И я вижу, что вы следите за w3school. Это хороший сайт для изучения. Удачи, приятель. Если у вас есть какие-либо вопросы, задайте их мне в комментарии. 🙂 [N.B: Это всего лишь пример, который вы получите больше при поиске в Интернете]

 function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className  = " responsive";
  } else {
    x.className = "topnav";
  }
}

 span.logo {
  position: absolute;
  /*This set the position absolute for take the My logo text inside the navbar section if you set positon fixed the the text will scroll will your body */
  top: 8px;
  /* Top 8px makes the logo in the middle of the navbar*/
  left: 5px;
  /* left 5px makes the logo get a margin from left border*/
  color: red;
  /* This is the color of text you can set it with your fev color*/
  font-weight: bold;
  /* set the font-weight bold*/
  font-size: 25px;
  /* set the font-size 25px you can change this. but remember if you make it bigger or smaller you need to set the top section so that it will be center with all other li */
z-index:10;   /* Set z-index so that It will display in navbar toggle menu*/
}

ul.topnav li:nth-child(1) {
  margin-left: 100px;
  /*This margin left apply on the li child 1 means the Home text in dextop view*/
}

body {
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
   
  ul.topnav li {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

   }

    

 <body>
 <span class="logo">My Logo</span>
  <ul class="topnav" id="myTopnav">
   <li><a class="active" href="#home">Home</a>
   </li>
   <li><a href="#news">News</a>
   </li>
   <li><a href="#contact">Contact</a>
   </li>
   <li><a href="#about">About</a>
   </li>
   <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>
</body>

1.Я бы выступил против абсолютного позиционирования в качестве решения. Он очень хрупкий и требует установки множества определенных значений и для других элементов, отличных от элемента текстового логотипа, т. Е. top , left margin-left . Высота строки IMHO и некоторое заполнение были бы лучше, чем top и left для позиционирования текста.

2. @hungerstar mate Я уже говорил, что в моей первой строке «Это просто пример», и если я не установлю абсолютную позицию. Как я могу установить этот интервал внутри тега ul, который находится вне ul в моем ответе? Если я не использую абсолютную позицию, мне придется добавить дополнительные html и css. И у вас больше опыта, чем у меня. Я хотел бы поучиться у вас. Не собираюсь с вами спорить. И спасибо за отрицательную оценку.

3. @hungerstar Я думаю, да. Вы прокомментируете мой ответ, возможно, вам не нравится мой ответ. И в этой теме никто больше не размещает ответ или комментарий. Итак, я думаю, вы тот, кто дает мне отрицательный отзыв. Если я ошибаюсь, то, возможно, я получу еще один отзыв после этого комментария. 😛 И если вы не тот, кто дает мне отрицательный ответ, тогда простите меня, если я обвиняю вас в этом. 🙂