14 Replies - 574 Views - Last Post: 10 December 2012 - 02:17 AM

#1 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

On Over in an On Over?

Posted 09 December 2012 - 11:30 PM

Hey Guys,

Been a little while since I posted, and that's because I'm going ok at this website stuff :D

But, I've come across a problem, in my website mockup i had a nav bar that when you rolled over a link it would bring up a sub menu and than when you rollover one of the links in the sub menu it was have a hover effect...

I cannot for the world think of how to word my question but, I have no idea how to get the effect

I can show the code I have for my nav bar if it's needed

Sorry if it's a bit of a doozy question

Is This A Good Question/Topic? 0
  • +

Replies To: On Over in an On Over?

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 09 December 2012 - 11:51 PM

What exactly was the hover effect and was it using CSS or Javascript? Do you at least have the code for a drop down menu?
Was This Post Helpful? 0
  • +
  • -

#3 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: On Over in an On Over?

Posted 09 December 2012 - 11:56 PM

Quote

in my website mockup i had a nav bar that when you rolled over a link it would bring up a sub menu


Wait...are you talking about accordion controls here?

regards,
Raghav

This post has been edited by raghav.naganathan: 09 December 2012 - 11:58 PM

Was This Post Helpful? 0
  • +
  • -

#4 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 12:40 AM

Hey Guys,

Thanks for the replies I would have replied earlier but, the site goes down randomly?
This is my CSS Code I have, sorry, I forgot to mention this is in CSS
#navigation {
			
position: fixed;
top: 0;
width: 100%;
height: 35px;
			margin: 0;
			padding: 0;
			list-style: none;
			background-color: #2f3336;
			/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
			}
		#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}

			#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:#2f3336;
/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
}

#navigation li:hover ul
{
display:block;
width:90px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
display: inline;
}


Just in case
HTML CODE for this
<div id="navigation">
        <ul>
            <li>
            <a href="#">Home</a>
                
            </li>

            <li>
            <a href="#">Graphics</a>
                <ul> <li>Hello</li> <li></li> <li></li> <li></li> </ul> 
            </li>

            <li>
            <a href="#">Edits</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li>
            <a href="#">Partners</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>
        </ul>
    </div>




Excuse the messiness knew to all this....this is how I managed to be able to find everything pretty fast
Was This Post Helpful? 0
  • +
  • -

#5 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:05 AM

It's still a little unclear about what "effect" you're going for, but I will assume it's for a background color change. Since those sub-menu items will be navigation items, go ahead and make them empty links for now.

CSS code

#navigation li:hover ul li a:hover
{background: red;}



HTML example:

<a href="#">sub menu item 1</a>


Was This Post Helpful? 0
  • +
  • -

#6 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:21 AM

View PostIJET, on 10 December 2012 - 01:05 AM, said:

It's still a little unclear about what "effect" you're going for, but I will assume it's for a background color change. Since those sub-menu items will be navigation items, go ahead and make them empty links for now.

CSS code

#navigation li:hover ul li a:hover
{background: red;}



HTML example:

<a href="#">sub menu item 1</a>



That got part of it, it hovers over the text, I'm looking to make a rectangular type hover effect

similar to this

Attached Image
Was This Post Helpful? 0
  • +
  • -

#7 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:25 AM

Looks to me like it's just a border.

#navigation li:hover ul li a:hover
{background: red;border: 5px solid #1e1e1e}


Was This Post Helpful? 0
  • +
  • -

#8 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:32 AM

View PostIJET, on 10 December 2012 - 01:25 AM, said:

Looks to me like it's just a border.

#navigation li:hover ul li a:hover
{background: red;border: 5px solid #1e1e1e}



I didn't explain properly...the lighter blue box that is inside that border :D
Was This Post Helpful? 0
  • +
  • -

#9 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:35 AM

Hmm.. looks like the background? Just swap out background: red with whatever color you want. Using #6d7781 will give you that blue color.
Was This Post Helpful? 0
  • +
  • -

#10 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:38 AM

View PostIJET, on 10 December 2012 - 01:35 AM, said:

Hmm.. looks like the background? Just swap out background: red with whatever color you want. Using #6d7781 will give you that blue color.

It changes the texts background...I'm having trouble making it all that blue...I'll show you an example

Attached Image

Also, why is my nav bar going across to the right...it's in the container...

This post has been edited by BrentisHere: 10 December 2012 - 01:39 AM

Was This Post Helpful? 0
  • +
  • -

#11 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:43 AM

Oh, I see what you were wanting.

#navigation li:hover ul li:hover



instead of ul li a:hover, it's ul li:hover. Should solve that. As for the nav spanning the page, I don't know. You'll have to post the code so I can see what's wrong with it.

This post has been edited by IJET: 10 December 2012 - 01:44 AM

Was This Post Helpful? 0
  • +
  • -

#12 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 01:47 AM

View PostIJET, on 10 December 2012 - 01:43 AM, said:

Oh, I see what you were wanting.

#navigation li:hover ul li:hover



instead of ul li a:hover, it's ul li:hover. Should solve that. As for the nav spanning the page, I don't know. You'll have to post the code so I can see what's wrong with it.

CHAMPION!!!!! that got it, it's just off to the right, Ill show you, should just need position though, I want to make sure :D and I'll post up the code <3

Attached Image

body {

	font-family: 'Alien league'; line-height: 36px;
	color:#9f9494;
	background: #b9d2f8 url(images/background.jpg);

}


#container {
	position: center;
	width: 900px; margin: 0 auto;

}


#navigation {
			
position: fixed;
top: 0;
width: 100%;

			margin: 0;
			padding: 0;
			list-style: none;
			background-color: #2f3336;
			/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
			}
		#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}

			#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;
color: #1d1d20;
background: url (images/onbuttonover.jpg);}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:29.5px;
background-color:#2f3336;
/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.1);
			color: rgba(1, 1, 1, 0.1);
}

#navigation li:hover ul
{
background: #2f3336;
display:block;
width:120px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
display: inline;
}

#navigation li:hover ul li:hover
{
background: #6d7781;
}

#header {

	padding: 48px 16px 0 16px; overflow: hidden;

}

	#header h1 a {

		display: block; width: 221px; height: 107px; float: left;

		background: url(images/logo.jpg); text-indent: -9999px;

	}

	

	#header ul#nav {

		width: 720px; float: right; margin: 42px 0 0 0;

	}

		#header ul#nav li {

			float: left; list-style: none;

		}

			#header ul#nav li a {

				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; 

				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;

				text-shadow: 0 3px 3px #333;

			}

				#header ul#nav li a:hover, #header ul#nav li a.active {

					background: url(images/active-nav.png);

				}
				
				#content {

	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;

	background: url(images/white-trans.png);

	border-radius: 3px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

}

#content ul#contentbox {

	list-style: none; overflow: hidden;

}

	#content ul#contentbox li {

		float: left; margin: 0 0 0 27px;

	}

		#content ul#contentbox li a {

			display: block; text-indent: -9999px;

		}

			#content ul#contentbox li a.content {

				width: 250px; height: 250px;

				background: url(images/contentbox.jpg);

			}

			#content ul#contentbox li a.contentbox {

				width: 250px; height: 250px;

				background: url(images/ononver_19.jpg);

			}

			#content ul#contentbox li a.contentbox1 {

				width: 250px; height: 250px;

				background: url(images/ononver_21.jpg);

			}
			


			#footer {

	min-height: 159px; overflow: hidden;

	background: url(images/footer-bg.jpg) center 0 no-repeat;

}

	#footer p a.back-top {

		float: right; margin: 14px 24px 0 0;

		font-size: 12px; text-decoration: none; color: #4d74bb;

	}

		#footer p a.back-top:hover {

			color: #234c97;

		}


Didn't know what you needed
Was This Post Helpful? 0
  • +
  • -

#13 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 02:02 AM

It's pushed because you have it set that way in the CSS.

#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}



Get rid of the margin-left: 45px and type in text-align: center

Then add this somewhere:

.push {margin-left: 45px}


To your CSS and make your HTML

<li class="push">
            <a href="#">Home</a>
                
            </li>

            <li class="push">
            <a href="#">Graphics</a>
                <ul> <li>Hello</li> <li></li> <li></li> <li></li> </ul> 
            </li>

            <li class="push">
            <a href="#">Edits</a>
                <ul> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 1</a></li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li class="push">
            <a href="#">Partners</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>
        </ul>



Still would need the HTML not just the CSS to see why it's running the full width of the page.

This post has been edited by IJET: 10 December 2012 - 02:03 AM

Was This Post Helpful? 0
  • +
  • -

#14 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 02:09 AM

*FIXED*
I had applied a
right: 45px;

To fix the problem from before, it's great now removed it...

This post has been edited by BrentisHere: 10 December 2012 - 02:13 AM

Was This Post Helpful? 0
  • +
  • -

#15 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: On Over in an On Over?

Posted 10 December 2012 - 02:17 AM

The results:

http://yodesirez.com/

Thank you so much everyone especially IJET that was an insane amount of knowledge and has been saved in 6 different spots on my laptop and sent a copy to my emails :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1