水平菜单滑块

Question

我需要水平菜单滚动，但是我正努力按照自己需要的方式工作。我不了解javascript，如果有人可以让我知道如何将javascript实现为php，那就太好了！我已经坚持了两天。

这就是我想要的...

我需要什么；

这是我到目前为止所拥有的；

您可以在下面的css和html中看到

.main-nav-bar {
	background-color: #333;
}
.scrollmenu {
	width: 500px;
}
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

<div class="main-nav-bar">
		<div class="scrollmenu">
			  <a href="#home">Home</a>
			  <a href="#news">News</a>
			  <a href="#contact">Contact</a>
			  <a href="#about">About</a>
			  <a href="#support">Support</a>
			  <a href="#blog">Blog</a>
			  <a href="#tools">Tools</a>  
			  <a href="#base">Base</a>
			  <a href="#custom">Custom</a>
			  <a href="#more">More</a>
			  <a href="#logo">Logo</a>
			  <a href="#friends">Friends</a>
			  <a href="#partners">Partners</a>
			  <a href="#people">People</a>
			  <a href="#work">Work</a>
		</div>
	</div>

我将感谢您的帮助！谢谢！

Answer 1

尝试下面的代码段，我认为这对您来说是个好开始：

<form 
  #customForm="ngForm" 
  (ngSubmit)="alpha(customForm)">
  <input 
    type="text" 
    name="firstName" 
    ngModel 
    #firstName="ngModel" 
    required>
  <br/>
  <div 
    class="red" 
    *ngIf="firstName.touched">
    <div 
      *ngIf="firstName.errors.required">
      Input field is required!
    </div>
  </div>
  <button 
    type="submit" 
    [disabled]="customForm.invalid">
    Submit
  </button>
</form>

.main-nav-bar {
	background-color: #333;
}
.scrollmenu {
	width: 500px;
}
div.scrollmenu {
    background-color: #333;
    overflow-x: auto;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

div.scrollmenu::-webkit-scrollbar {
    display: none; 
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

查看此博客https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu，希望对您有所帮助:)