Designing a horizontal slide banner with enhanced functionality

Question

Designing a horizontal slide banner with enhanced functionality

I am working on displaying a vertical banner that slides out horizontally from the right side of the screen when the user clicks on the open button/div, and also has the ability to close it. The basic design concept is illustrated in the sample image below.

To see my progress, I have created a demonstration on CodePen: http://codepen.io/anon/pen/oXgePX

<div class="horizontal-slide" id="other-menu"><<</div>


<div class="menu-other slide-right slide-opened" id="other-menu-content">
  horizontal on right slide div
</div>

UPDATE:

I was able to achieve the desired effect by enclosing the banner and button within another div.

.wrapper{
  float:right;
  position:absolute;
  right:0;
}

Here is an improved example: http://codepen.io/anon/pen/aOzyxo

I am still working on making the button slide along with the banner for a smoother appearance.

javascript jquery html css

Answer 1

Answer №1

It seems a modification to your CSS is necessary.

Take this for instance:

/* adjust floating */
float:left;

/* fixed positioning */
position:fixed;

Your code should resemble something like this:

http://codepen.io/anon/pen/mJyMgY

Am I misunderstanding your query?

Answer 2

It seems a modification to your CSS is necessary.

Take this for instance:

/* adjust floating */
float:left;

/* fixed positioning */
position:fixed;

Your code should resemble something like this:

http://codepen.io/anon/pen/mJyMgY

Am I misunderstanding your query?

Answer 3

Answer №2

Perhaps this is the solution you were looking for. It seems like a promising start to me.

$(function() {

  //slideout-menu-toggle
  $(".banner-slide").click(function(event) {
    var _slideMenu = $("#right-banner");
    if (_slideMenu.hasClass("slide-opened")) {
      $( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
      $(  "#hbanner" ).html("<<");
      //alert('a')
    } else {
      $( "#right-banner" ).animate({ "right": "0" }, "slow" );
      $(  "#hbanner" ).html(">>");
    }

    _slideMenu.toggleClass("slide-opened");
  });
});

#right-banner {
  position:absolute;
  right:0;
  top: 0;
  width: 210px;
}

.right-banner {
  width: 150px;
  height: 200px;
  background-color: green;
  padding: 20px;
  float: right;
  background-color: blue;
}

#hbanner {
  float: left;
  background-color: red;
  cursor:pointer;
}

.wrapper {
  float: right;
  position: absolute;
  right: 0;
  z-index: 100000;
}

.content {
  width: calc(100% - 210px);
  background-color: magenta;
  height: 200px;
  float: left;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
  This is sample text</div>
<div class="wrapper">
  <div id="right-banner" class="slide-opened">
    <div class="banner-slide" id="hbanner">
      >>
    </div>

    <div class="right-banner" id="hbanner-wrapper">
     horizontal on right slide div
     </div>
   </div>
</div>

Answer 4

Perhaps this is the solution you were looking for. It seems like a promising start to me.

$(function() {

  //slideout-menu-toggle
  $(".banner-slide").click(function(event) {
    var _slideMenu = $("#right-banner");
    if (_slideMenu.hasClass("slide-opened")) {
      $( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
      $(  "#hbanner" ).html("<<");
      //alert('a')
    } else {
      $( "#right-banner" ).animate({ "right": "0" }, "slow" );
      $(  "#hbanner" ).html(">>");
    }

    _slideMenu.toggleClass("slide-opened");
  });
});

#right-banner {
  position:absolute;
  right:0;
  top: 0;
  width: 210px;
}

.right-banner {
  width: 150px;
  height: 200px;
  background-color: green;
  padding: 20px;
  float: right;
  background-color: blue;
}

#hbanner {
  float: left;
  background-color: red;
  cursor:pointer;
}

.wrapper {
  float: right;
  position: absolute;
  right: 0;
  z-index: 100000;
}

.content {
  width: calc(100% - 210px);
  background-color: magenta;
  height: 200px;
  float: left;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
  This is sample text</div>
<div class="wrapper">
  <div id="right-banner" class="slide-opened">
    <div class="banner-slide" id="hbanner">
      >>
    </div>

    <div class="right-banner" id="hbanner-wrapper">
     horizontal on right slide div
     </div>
   </div>
</div>

Answer 5

Answer №3

Make your code cleaner and more concise by utilizing CSS transitions along with a basic toggleClass function in jQuery:

$('#clickMe').on('click', function(){
    $('#box').toggleClass('open');
});

Check out the live demo: http://codepen.io/jsmith/pen/RqLxYP

Answer 6

Make your code cleaner and more concise by utilizing CSS transitions along with a basic toggleClass function in jQuery:

$('#clickMe').on('click', function(){
    $('#box').toggleClass('open');
});

Check out the live demo: http://codepen.io/jsmith/pen/RqLxYP

Answer 7

Answer №4

implement a jQuery toggle function

$('#slider').toggleClass('sliderthing');

combining it with CSS for styling should create a good effect

Answer 8

implement a jQuery toggle function

$('#slider').toggleClass('sliderthing');

combining it with CSS for styling should create a good effect

Answer 9

Answer №5

To achieve this effect, I enclosed the banner and button within another container.

You can view the updated demonstration here: http://codepen.io/anon/pen/eWzbxJ

I included specific animations to ensure that the red button appears and disappears immediately upon clicking, accompanied by a seamless transition.

.container {
  float: right;
  position: absolute;
  right: 0;
  z-index: 100000;
}

Answer 10

To achieve this effect, I enclosed the banner and button within another container.

You can view the updated demonstration here: http://codepen.io/anon/pen/eWzbxJ

I included specific animations to ensure that the red button appears and disappears immediately upon clicking, accompanied by a seamless transition.

.container {
  float: right;
  position: absolute;
  right: 0;
  z-index: 100000;
}

Designing a horizontal slide banner with enhanced functionality

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Strategies for organizing your week with a calendar

Encountering a 404 error while attempting to upload files with multer in node.js

Steps for coloring an image using pixel values retrieved from a database

Inject the error into the Router in Express.js, utilizing Node.js

When validating with Sequelize, an error occurred due to one or more columns being undefined:

Creating a new object through manipulation of existing objects

Enhancing an identity function with type hinting

Issue with Internet Explorer 7 causing table to display with added height

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

Incorporate a fresh key-value pair into the Redux Toolkit's state

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

Adjust the position of elements based on their individual size and current position

"Encountering a problem with installing packages on Node.js through npm

What is the best way to show all cards in Angular when no filtering input is provided?

An issue with MVC Ajax calls to an API resulting in a null model retrieval

Show a dynamic modal with a widget displayed inside

Tips for incorporating over ten elements in a carousel

What can I do to prevent masonry images from piling on top of one another?

The functionality of session_start() is operating smoothly in Firefox, however, it is experiencing compatibility issues

Utilize emit to distribute / allocate a variable