固定位置的导航栏问题

时间:2020-05-12 07:58:10

标签: javascript html css

对我来说,主要目标是制作固定位置的导航栏。我无法介绍它,因为一旦将元素放入MainActivity.java中,所有children元素都被挤压到左上角。现在,这就是我所拥有的:

public class MainActivity extends AppCompatActivity {

    TextView category1, category2, category3, category4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        category1 = findViewById(R.id.category1);
        category2 = findViewById(R.id.category2);
        category3 = findViewById(R.id.category3);
        category4 = findViewById(R.id.category4);

        Spinner spinner = findViewById(R.id.spinner);
        String[] spinnerArray = {"Category-1", "Category-2", "Category-3", "Category-4"};
        ArrayAdapter<String> spinnerArrayAdapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, spinnerArray);
        spinnerArrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(spinnerArrayAdapter);

        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int category, long id) {
                showTextView(category);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
    }

    void showTextView(int category) {
        switch (category) {
            case 0:
                category1.setVisibility(View.VISIBLE);
                category2.setVisibility(View.GONE);
                category3.setVisibility(View.GONE);
                category4.setVisibility(View.GONE);
                break;
            case 1:
                category1.setVisibility(View.GONE);
                category2.setVisibility(View.VISIBLE);
                category3.setVisibility(View.GONE);
                category4.setVisibility(View.GONE);
                break;
            case 2:
                category1.setVisibility(View.GONE);
                category2.setVisibility(View.GONE);
                category3.setVisibility(View.VISIBLE);
                category4.setVisibility(View.GONE);
                break;
            case 3:
                category1.setVisibility(View.GONE);
                category2.setVisibility(View.GONE);
                category3.setVisibility(View.GONE);
                category4.setVisibility(View.VISIBLE);
                break;
        }
    }
}
.nav{}
const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');

    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
      }
    });
    burger.classList.toggle('toggle');
  });
}

navSlide();

1 个答案:

答案 0 :(得分:0)

在您的width: 100%;规则中添加nav{}