CODEWITHSUNDEEP
htmlcss
BGM52
BGM52

Reputation: 92

How do I make a part of a div hide itself off screen?

I have looked into this and found code samples like this one, but when I apply the code it either doesn't work or messes up my layout. Here is my current code:

#welcome {
  float: left;
  margin-left: 30px;
}

.account {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
  color: black;
}

.account-item {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
  color: black;
  background-color: lightgray;
  margin-left: 0;
  margin-right: 0;
  margin-top: 25px;
  padding: 5px 10px 5px 10px;
}

.account-item:nth-child(3) {
  border-radius: 10px 0 0 10px;
}

.account-item:hover {
  background-color: gray;
}

#accountdiv img {
  margin-right: 5px;
  margin-top: 28px;
}
<div id="navbar">
  <h1 id="welcome">Hello, User!</h1>
  <div id="accountdiv">
    <div id='accountop'>
      <div id='accountap'>
        <h3 class="account-item">Logout</h3>
        <h3 class="account-item">Settings</h3>
        <h3 class="account-item">Dashboard</h3>
      </div>
    </div>

    <h3 class="account" id="account" class="tooltip">[email protected]</h3>
    <img class="account" src="https://cdn0.iconfinder.com/data/icons/users-android-l-lollipop-icon-pack/24/user-512.png" width="25px" />
  </div>
</div>

I plan to have the account items (dashboard, settings, logout) to slide over upon hover using jquery. But I don't quite know hot I would hide those items off screen in the first place. I tried setting the width of #accountdiv to 122%, which hid it on my monitor, but when I switched over to one with a smaller screen, it came back into view.

I also tried the code I linked to above, but that ended up messing up the layout of the div (It moved the items over to the left side of the screen, and when I tried to fix it, it messed it up more).

Any help is appreciated.

Upvotes: 0

Views: 76

Answers (2)

jeanpaulxiao
jeanpaulxiao

Reputation: 323

Not sure what element you'd like to hover for the slide in, but this example uses the avatar image as hover:

CSS

#accountdiv {
    overflow:hidden;  
    position:relative;
}

#accountap {
    position:absolute;
    right:-20em;
}

#accountap {
   transition:all 0.5s;  
}

Javascript

$('img.account').hover(
    function () {
        $('#accountap').css('right', '0');
    }
);

HTML

 <div id='accountap'>
        <h3 class="account" id="account" class="tooltip">[email protected]</h3>                   
        <h3 class="account-item">Logout</h3><h3 class="account-item">Settings</h3><h3 class="account-item">Dashboard</h3>            
 </div>
 <img class="account" src="https://cdn0.iconfinder.com/data/icons/users-android-l-lollipop-icon-pack/24/user-512.png" width="25px" />

Initially the menu is off to the right by 20em. When hovering over the avatar, jQuery updates the CSS rule to 0em.

Upvotes: 1

brianespinosa
brianespinosa

Reputation: 2408

I tried to change your original markup as little as possible to illustrate how you would accomplish this mostly with CSS with what you have. I did have to change the order of your menu items however because I removed the float. In general for positioning menu items like this, you probably do not want to use float. You will have to do a lot of clearfix work and you can probably accomplish more with fewer lines of CSS and markup if you don't use them.

I'd also point out that from a semantic standpoint, you probably do not want to be using h3 tags for your menu. I'd recommend making your menu a <nav> tag and then wrapping anchor links inside of it, possibly with a <ul> inside of the nav.

This whole layout could be accomplished with significantly less markup and CSS. Again, I am trying to change as little markup as possible to get you to where you are asking to go.

#welcome {
	float: left;
	margin-left: 30px;
}


#accountop {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    transition: transform 300ms ease-in-out;
}

#accountdiv {
    background-color: red;
}

#accountdiv:hover > #accountop {
    transform: translateX(-100%);
}

.account {
	float: right;
	margin-right: 30px;
	margin-top: 30px;
	color: black;
}

.account-item {
	margin-top: 30px;
	color: black;
	background-color: lightgray;
	margin-left: 0;
	margin-right: 0;
	margin-top: 25px;
	padding: 5px 10px 5px 10px;
    display: inline-block;
}

.account-item:nth-child(3) {
	border-radius: 10px 0 0 10px;
}

.account-item:hover {
	background-color: gray;
}

#accountdiv img {
	margin-right: 5px;
	margin-top: 28px;
}
	  <div id="navbar">
			<h1 id="welcome">Hello, User!</h1>
			<div id="accountdiv">
				<div id='accountop'>
					<div id='accountap'>
                        <h3 class="account-item">Dashboard</h3>
                        <h3 class="account-item">Settings</h3>
						<h3 class="account-item">Logout</h3>
					</div>
				</div>
				
				<h3 class="account" id="account" class="tooltip">[email protected]</h3>
				<img class="account" src="https://cdn0.iconfinder.com/data/icons/users-android-l-lollipop-icon-pack/24/user-512.png" width="25px" />
			</div>
	  </div>

Upvotes: 0

Related Questions