4 Replies - 572 Views - Last Post: 12 November 2015 - 02:40 PM

#1 dimityr96   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-November 15

CSS vertical menu

Posted 12 November 2015 - 05:18 AM

Hello,
I tried to create a vertical css menu and I did it almost successfuly except adding the submenus. Here is my code so you could see what i've done myself and help me
https://jsfiddle.net/ZuC2W/114/
2.1 .2.2 should be hidden by default and when the pointer is on 2 they should show on right side and should be clickable
Thank you !

   <div id="menu_left" class="menu" >
            
	<ul>
		<li><a href="index.html">1</a></li>
		<li><a href="#">2</a>
			<ul>
				<li><a href="http://users.aber.ac.uk/dpv/wordpress/">2.1</a></li>
				<li><a href="http://users.aber.ac.uk/dpv/webshop/catalog/">2.2</a></li>
			</ul>
		</li>
		<li><a href="mycv.html">3</a></li>
		<li><a href="about.html">4</a></li>
	</ul>
            </div>
                <div id="content">
                


body 
{
    background-image: url("bg2.png"); 
	background-repeat: repeat;
	cursor: url(auto.cur), auto; 
}

#header{
    margin-left:auto;
	margin-right: auto;
	width:100%;
	color:red;
	height:120px; padding-top:5px;
	padding-left:2em;
	text-shadow: 3px 3px 3px black;
	float:left;
	}
	
#menu_left 
{
	float:left;
	width:20%;
	min-height: 600px;
}

    #content 
	{
	color:green;
    float:left;
    width:60%;
    min-height: 600px;
}
    h1 
	{
	text-align:center;
	font-family:comic sans ms;
	}
    
    #right
{
	float:left;
    width:20%;
    min-height: 600px;
    float:left;
}

    #footer
{
    width:100%;
    float:bottom;
}
    
   .menu ul 
{
margin: 0;
	padding: 0;
	width:185px;
	list-style-type: none;
}

.cursor a 
{
	cursor: url(link.cur), auto;
}

.menu ul li a 
{margin: 2px;
	padding: 2px;
	font-family:comic sans ms;
	border-bottom: 1px solid #ccc;
	
	height:25px;
	width:160px;
	-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;


	border-color:red;
	cursor: pointer;
	cursor: url(link.cur), auto;
	text-decoration: none;
	color: white;
	padding: 9px 11px;
	background-color: grey;
	display:block;
	
}

.menu ul li a:visited 
{
color: white;
}

.menu ul li a:hover, .menu_simple ul li .current 
{
color: white;
background-color: #0099CC;  /* green #5FD367 */
}
    

/* THE SUBMENU LIST HIDDEN BY DEFAULT 
.menu ul  ul {
  display: none;
}
*/


This post has been edited by Atli: 12 November 2015 - 02:00 PM
Reason for edit:: Copied the code into the post. Please post code examples into the post. External links tend to go dead with time.


Is This A Good Question/Topic? 0
  • +

Replies To: CSS vertical menu

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6916
  • View blog
  • Posts: 28,598
  • Joined: 12-December 12

Re: CSS vertical menu

Posted 12 November 2015 - 05:50 AM

You've commented out the code that hides the submenu:
.menu ul  ul {
  display: none;
}

but, with this uncommented, where is your attempt to display it again? And to show it on the right side?

There are hundreds of tutorials available to create CSS menus.

This post has been edited by andrewsw: 12 November 2015 - 05:50 AM

Was This Post Helpful? 0
  • +
  • -

#3 dimityr96   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-November 15

Re: CSS vertical menu

Posted 12 November 2015 - 12:07 PM

Do you think i will write a post if I knew how to do it ?! I know what i've commented. There are hundreds of tutorials how to copy and paste somebody's menu.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6916
  • View blog
  • Posts: 28,598
  • Joined: 12-December 12

Re: CSS vertical menu

Posted 12 November 2015 - 12:23 PM

Who said anything about copying and pasting? I am stating that there are hundreds of tutorials that you could choose from to study and understand how to create a CSS menu, of any kind. With this knowledge you would then be able to make an attempt at this, which you haven't so far and which is a requirement of this forum.

Anyway, maybe someone else will offer some advice or point you towards a specific tutorial.
Was This Post Helpful? 0
  • +
  • -

#5 dimityr96   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-November 15

Re: CSS vertical menu

Posted 12 November 2015 - 02:40 PM

Here are some improvements but you can see in the link below that it still doesn't fits well ( in internet browser the distance between 2 buttons is bigger. Any ideas ?


  
.menu ul li ul{
    position:absolute;
    display:none;
}

.menu ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}

.menu ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

https://jsfiddle.net/ZuC2W/119/
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1