Горизонтальное скроллинг меню html

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

В место, где должно отображаться меню, добавляем код:

<header class="scroll1"><nav><a href="/ссылка на страницу">Меню1</a><a href="/">Меню2</a><a href="/">Меню3 </a><a href="/">Меню4</a><a href="/">Меню5</a><a href="/">Меню6</a></nav></header>

 

Прописываем CSS стили:

<style scoped="scoped" type="text/css"><!--

.scroll1 {

white-space: nowrap;

font-size: 20px;

background: #2f2f2f;

color:#ffffff;

padding: 20px 10px;

text-transform: uppercase;

overflow-x: auto;

-webkit-overflow-scrolling: touch;

-ms-overflow-style: -ms-autohiding-scrollbar; }

.scroll1 a {

color: #fff;

margin-right: 15px;

}

--></style>

 

Пример использования:

Читайте также:

комментариев 10

  1. Unquestionably believe that which you said. Your favorite reason seemed to be on the net the simplest thing to be aware
    of. I say to you, I certainly get annoyed
    while people consider worries that they just do not know about.
    You managed to hit the nail upon the top and defined out
    the whole thing without having side-effects , people can take a signal.
    Will likely be back to get more. Thanks

  2. Wow! In the end I got a webpage from where I be able to
    actually obtain valuable facts regarding my study
    and knowledge.

  3. It’s genuinely very difficult in this active life to listen news on Television, so I just use
    web for that reason, and take the latest information.

  4. I was wondering if you ever thought of changing the layout of
    your website? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having one or 2 pictures.

    Maybe you could space it out better?

  5. Thank you for the good writeup. It in fact was a amusement account it.

    Look advanced to more added agreeable from you! However,
    how can we communicate?

  6. Hello there, I do believe your web site could possibly be having internet browser compatibility issues.
    Whenever I take a look at your blog in Safari,
    it looks fine but when opening in Internet Explorer, it has some overlapping issues.
    I simply wanted to provide you with a quick heads up! Apart from that,
    great blog!

  7. Heya i am for the first time here. I found this board and I find It
    really useful & it helped me out a lot. I hope to give something back and help others like you aided me.

  8. My coder is trying to persuade me to move to .net from
    PHP. I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and
    am worried about switching to another platform. I have heard fantastic things about blogengine.net.
    Is there a way I can transfer all my wordpress content into
    it? Any kind of help would be greatly appreciated!

  9. Dann:

    Hi, this weekend is good in support of me, since this moment i am reading this fantastic informative article here at my home.

  10. Very nice post. I just stumbled upon your blog and wished to
    say that I’ve truly enjoyed surfing around your
    blog posts. After all I will be subscribing to your rss feed and
    I hope you write again very soon!

Добавить комментарий

Ваш адрес email не будет опубликован.

После оплаты вы получите письмо на скачивание 3500 пресетов и инструкцию по их установке

+ПРЕСЕТЫ ИЗВЕСТНЫХ БЛОГЕРОВ

+ПОДАРКИ

На следующем шаге вам нужно ввести  эл.почту, на которую вы получите пресеты. Нажмите «ОТПРАВИТЬ», чтобы продолжить

*Ваши данные не будут переданы 3 лицам