Jump to content

multi dropdown/navi


Recommended Posts

hi everyone i'm trying to learn the code to build my own website. i want to make a website using 960grid system 16 colum. but i coulden't find anywhere how to make category? i want to be the navigator on top right and under to be 2 category and multiple subcategory.

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>title</title>
<meta name="keywords" content="bla bla">
<meta name="description" content="about bla bla">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<!-- body -->
<body>
	<div class="container_16">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
</style>
<!-- header -->
<header>
	<div class="grid_5 alpha brand">webname</div>
	<div class="grid_11 omega">
<!-- navigation -->
		<nav>
			<ul>
				<li><a href="#">Contact</a> |</li>
				<li><a href="#">Home</a> |</li>
				<li><a href="#">SingUp</a></li>
			</ul>
		</nav>
	</div>
</header>
<!-- footer -->
<!--footer>
	<p>&copy; 2017 All rights reserved.</p>
</footer>
</body>
</html>

for the style i use grid 960_16_col.css and i add this.

under this on the same header i want to make another container with 2 category like i said up.

body {
  min-width: 960px;
  background-image: url(headerbackground.png);
  background-repeat:repeat-x;
}

.brand {
	font-size: 55px;
	font-weight: 600;
}

/* text color */
header {
	color: #ff1e00;
}

/* navigator position */
nav {
	text-align: right;
	margin-top: 20px;
}

/* navigator text */
nav a {
	color: #ff1e00;
	text-decoration: none;
	padding: 5px;
}

/* navigator hover */
nav a:hover {
	background: #6b7d6f;
	border-radius: 12px;
}

/* An Unordered List */
header ul {
	margin: 0;
	padding: 0;
}

/* navigator alignment */
header li {
	list-style: none;
	display: inline;
	margin-left: 5px;
	padding: 0;
	font-size: 16px;
}

 

Link to post
Share on other sites

That is vague also? I suspect you mean main parent menu with child sub-menus, which in turn can have child sub-menu and so on.

Its just the same as using un/ordered list which have sub-child list-items, then another sub-child list-item. You just style li elements that are hovered over to show its child ul including all its child list-items.

Link to post
Share on other sites
  • 3 weeks later...

put them into horizontal lists. Preview Website

<html>
<body>


<style>
  li {
    float: left;
    list-style-type:none;
}
</style>
<ul>
                                <li><a href="#">Contact</a> |</li>
                                <li><a href="#">Home</a> |</li>
                                <li><a href="#">SignUp</a></li>
                        </ul>
</body>
</html>

 

to correct yours...


<!-- change style to include header -->

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
header {float:left; list-style-type:none;}
</style>

If you want multiple lists, make multiple lists in columns.  Nobody says you can't float and use tables.

Edited by Johnny7oak
just figured it out..
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...