Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var menu_svg_width = 60,
- menu_svg_height = 60,
- toggle_switch = true,
- initial_color = '#fff',
- close_color = '#f2721d',
- sidebar_duration = 600,
- sidebar_extended_width = 250,
- sidebar_closed_width = 60;
- var menu_svg = d3.select('#sidebar_div')
- .append('svg')
- .attr({
- width: menu_svg_width,
- height: menu_svg_height,
- id: 'menu_svg',
- cursor: 'pointer'
- })
- .on('click', function(){
- var transition_duration = 300,
- scale_factor = .1;
- if (toggle_switch == true) {
- d3.selectAll('#top_bar, #bottom_bar')
- .transition()
- .duration(transition_duration)
- .attr('width', menu_bar_height)
- .attr('x', (menu_svg_width/ 2) - ((menu_bar_width * scale_factor) / 2))
- .attr('fill', close_color)
- .transition()
- .duration(transition_duration)
- .attr('height', menu_bar_width)
- .attr('y', (menu_svg_height / 2 - (menu_bar_width / 2)));
- d3.select('#middle_bar')
- .transition()
- .duration(transition_duration)
- .attr('fill', close_color);
- d3.select(this)
- .transition()
- .duration(transition_duration)
- .attr('transform', 'rotate(-45)')
- .style('-webkit-transform',"rotate(-45 deg);")
- .style('-moz-transform',"rotate(-45 deg);");
- d3.select('#sidebar_div')
- .transition()
- .duration(sidebar_duration)
- .style('width', sidebar_extended_width + 'px')
- .transition()
- .duration(300)
- .ease('cubicInOut')
- .style('height', '100vh');
- d3.select('#sidebar_link_div')
- .transition()
- .duration(600)
- .delay(800)
- .style('opacity', 1)
- toggle_switch = false}
- else {
- d3.selectAll('#top_bar, #bottom_bar')
- .transition()
- .duration(transition_duration)
- .attr('height', menu_bar_height)
- .attr('y', function (d, i) {
- if (i == 0) {
- return 1 * (menu_svg_height / 4) - (menu_bar_height / 2) + top_bottom_padding}
- else {
- return 3 * (menu_svg_height / 4) - (menu_bar_height / 2) - top_bottom_padding}
- })
- .attr('fill', initial_color)
- .transition()
- .duration(transition_duration)
- .attr('width', menu_bar_width)
- .attr('x', (menu_svg_width - menu_bar_width) / 2);
- d3.select('#middle_bar')
- .transition()
- .duration(transition_duration)
- .attr('fill', initial_color);
- d3.select(this)
- .transition()
- .duration(transition_duration)
- .attr('transform', 'rotate(0)')
- .style('-webkit-transform',"rotate(0 deg);")
- .style('-moz-transform',"rotate(0 deg);");
- d3.select('#sidebar_div')
- .transition()
- .duration(300)
- .style('height', '60px')
- .transition()
- .duration(sidebar_duration)
- .style('width', sidebar_closed_width + 'px');
- d3.select('#sidebar_link_div')
- .transition()
- .duration(100)
- .style('opacity', 0)
- toggle_switch = true
- }
- });
- var top_bottom_padding = 5,
- menu_bar_ids = [{id: 'top_bar', padding: top_bottom_padding},{id: 'middle_bar', padding: 0}, {id: 'bottom_bar', padding: -top_bottom_padding}],
- menu_bar_padding = 28,
- menu_bar_width = menu_svg_width - menu_bar_padding,
- menu_bar_height = 2;
- var menu_bar_rects = menu_svg.selectAll('rect')
- .data(d3.entries(menu_bar_ids))
- .enter()
- .append('rect')
- .attr({
- x: (menu_svg_width - menu_bar_width) / 2,
- y: function (d, i) {return (i + 1) * (menu_svg_height / 4) + d.value.padding - (menu_bar_height / 2) },
- width: menu_bar_width,
- height: menu_bar_height,
- fill: initial_color,
- id: function(d) {return d.value.id}
- });
Add Comment
Please, Sign In to add comment