How i get a interactive mainmenu in a cite

HTML-CSS
1

I’m trying to learning css and in this case i am wrote a cite code in html and I’ve formatted with css in addition this
i want to coding an interactive menu on my cite
how can i get an interactive menu?

<html>
<head>
	<style type="text/css">
		.box{
	 position: fixed;
	 border:1px solid red;
          padding:15px;
           margin:20px;
            width:1000px; 
            height: 500px;
           overflow: auto;
		}
		ul{list-style-type: none;

		}
		li{ display:inline;
			width: 60px;
			margin:15px;
			padding:5px;
			text-align: center;
			font-family:arial;
			border-color: blue;
			border-style: solid;
			background-color:blue;
			color:white;
			font-weight: bold;

		}
		
	</style>
</head>
<body>
<div class="box">
	<h1>Hy hobbies</h1>
<ul>
	<li>Web Design</li>
	<li>Programming</li>
	<li>Economics</li>
	<li>Maths</li>
	<li>Fitness</li>
	<li>Books</li>
</ul>
<p>
	Computer use is increasing in most fields of endeavor. Computing costs have
decreased dramatically due to rapid developments in both hardware and software technologies. Computers that might have filled large rooms and cost millions of dollars a few
decades ago can now be inscribed on silicon chips smaller than a fingernail, costing a few
dollars each. Those large computers were called mainframes and current versions are
widely used today in business, government and industry. Fortunately, silicon is one of the
most abundant materials on earth—it’s an ingredient in common sand. Silicon chip technology has made computing so economical that more than a billion general-purpose computers are in use worldwide, helping people in business, industry and government, and in
their personal lives.

	</p>

</div>

</body>
</html>
2

Hi! What do you mean by interactive menu? There are a plenty of ways to achieve a menu. Where would you place it?

3

Could you be more specific about what issue you’re running into implementing a menu? The question is vague and hard to answer adequately with what you’ve provided.

That said, I pasted your code into a Codepen and it looks like you’ve made a decent start at building a menu. Some advice I’d provide:

  • Wrap your ul in a <nav> tag
  • put <a> tags around your li elements with the appropriate href= attributes so they will link where you want them to
  • on your lis, set margin: 15px 0 so you don’t have whitespace between each element (though this is an aesthetic preference)
  • do a Google search for “pure CSS navigation menu” to find lots of examples and the code for them if you need ideas
1 Like
4

for example we think a menu fixed left on the page and menu elements are little image,
should be shows title and instead little image and should open to the right when mouse moving to menu hover.

5

So you want a menu that slides out from the left side of the page. Those are usually somewhat complex, using either JavaScript or CSS Transitions (or both).
One rule of programming: don’t write from scratch if you can solve the problem with code that’s already been written.

There are many examples on the internet of slide-out menus. I’d advise to do a Google search for “slide out menus”, find one you like, and modify it to fit your project.

You can also search on Codepen for the same thing. Here are a few examples I found to start you off:

https://codepen.io/rickzanutta/pen/wGjqt
https://codepen.io/nikhil/pen/sicrK

1 Like
6

thank you…I will consider your recommendations and codepen is in my favourites