CODEWITHSUNDEEP
jqueryhtmlcssajaxnav
Emily
Emily

Reputation: 75

issue making navigation float left

I have a feedback panel but the problem is that when you click on it the navigation overrides some contents of the feedback panel.

As you can see in the image above the email input field is blocked.

Question

What I want to do is that when a user clicks on the feedback, the <nav> will float to the left so that the user can enter what they want and then they click on feedback again and the nav returns back to center.

nav bar css

nav{
text-align:center;
}

html

<div class="panel">
    <h3>Sliding Panel</h3>
    <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>

    <p>This panel is placed on the right instead of on the left. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>



<div style="clear:both;"></div>

Upvotes: 0

Views: 122

Answers (2)

Emily
Emily

Reputation: 75

javascript 

<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $('nav').toggleClass('moved');
        $(this).toggleClass("active");
        return false;
    });
});
</script>

css

.moved{
float:left;
}

Upvotes: 0

James Holderness
James Holderness

Reputation: 23001

Why don't you just set the z-index on the feedback panel to 50 (or more if it comes before the nav in the DOM). That way it will appear above the nav and you don't have to worry about moving the nav out of the way.

Otherwise, if you really want to move the nav out of the way when the feedback panel is shown, you could do something like this:

$('.feedback-button').click(function(){
    $('nav').toggleClass('moved');
   /* whatever else you do when the feedback button is clicked */
});

Which would toggle a "moved" class on the nav element whenever the feedback button is clicked. This is assuming the existance of a feedback button of some sort with the class "feedback-button".

Then you can set some css like this:

nav.moved {
  -webkit-transform:translate(-100px,0);
  transform:translate(-100px,0);
}

Which would move the nav left by 100 pixels when the moved class is set.

If you want it to animate, you could add a transition to the nav element as well.

nav {
  -webkit-transition:transform 1s ease-in-out;
  transition:transform 1s ease-in-out;
}

Upvotes: 1

Related Questions